Javascript Bootstrap popover不'；在刚刚添加到DOM的元素上触发

当我将鼠标悬停在div上时，会显示一个图标

点击这个图标，我想显示一个弹出框

由于某种原因，爆米花根本不会触发

我的HTML：

<div class="kpi">
    <p>this is the kpi</p>
</div>

这是kpi

我的JavaScript：

$('.kpi').live('mouseenter', function(e) {
        $(this).find('p:first').append('<span class="gear" style="margin-left: 10px; position: absolute;"><i class="icon-cog"></i></span>');
    });

    $('.kpi').live('mouseleave', function(e) {
        $('.gear').remove();
    });

    $('.gear').popover({
        title:"titke",
        content:"click me",
        trigger:"click"
    });

$('.gear').live('click', function(e) {
    alert('clicked the gear');    
});

$（'.kpi'）.live（'mouseenter'，函数（e）{
$（this.find（'p:first'）。append（“”）；
});
$（'.kpi'）.live（'mouseleave'，函数（e）{
$（'.gear'）。删除（）；
});
$（'.gear'）.popover({
标题：“山雀”，
内容：“点击我”，
触发器：“单击”
});
$（'.gear'）.live（'click'，函数（e）{
警报（“点击齿轮”）；
});

我可能会犯什么错误

---

以下是。

在不存在的元素上初始化

popover

$('.kpi').live('mouseenter', function(e) {
    $(this).find('p:first').append('<span class="gear" style="margin-left: 10px; position: absolute;"><i class="icon-cog"></i></span>');

    //Call the popover after creation of gear
    $('.gear').popover({
        title:"titke",
        content:"click me",
        trigger:"click"
    });

});

    $('.kpi').live('mouseleave', function(e) {
        $('.gear').remove();
    });


$('.gear').live('click', function(e) {
    alert('clicked the gear');    
});

$（'.kpi'）.live（'mouseenter'，函数（e）{
$（this.find（'p:first'）。append（“”）；
//创建gear后调用popover
$（'.gear'）.popover({
标题：“山雀”，
内容：“点击我”，
触发器：“单击”
});
});
$（'.kpi'）.live（'mouseleave'，函数（e）{
$（'.gear'）。删除（）；
});
$（'.gear'）.live（'click'，函数（e）{
警报（“点击齿轮”）；
});

演示：

---

在创建

.gear

元素并将其附加到dom（this.find（'p:first'））之后，需要调用

$（'.gear'）.popover（{…}）

。

popover

在不存在的元素上初始化

$('.kpi').live('mouseenter', function(e) {
    $(this).find('p:first').append('<span class="gear" style="margin-left: 10px; position: absolute;"><i class="icon-cog"></i></span>');

    //Call the popover after creation of gear
    $('.gear').popover({
        title:"titke",
        content:"click me",
        trigger:"click"
    });

});

    $('.kpi').live('mouseleave', function(e) {
        $('.gear').remove();
    });


$('.gear').live('click', function(e) {
    alert('clicked the gear');    
});

$（'.kpi'）.live（'mouseenter'，函数（e）{
$（this.find（'p:first'）。append（“”）；
//创建gear后调用popover
$（'.gear'）.popover({
标题：“山雀”，
内容：“点击我”，
触发器：“单击”
});
});
$（'.kpi'）.live（'mouseleave'，函数（e）{
$（'.gear'）。删除（）；
});
$（'.gear'）.live（'click'，函数（e）{
警报（“点击齿轮”）；
});

演示：

---

在创建

.gear

元素并将其附加到dom（this）之后，需要调用

$（'.gear'）.popover（{…}）

，查找（'p:first'）。追加（…）

首先，您很抱歉，JSFiddle缺少jQuery popover插件：我假设您想要包含它

但真正的问题是这一行代码：

$(this).find('p:first').append('<span class="gear" ....

虽然它可能不完全是您想要的（因为您应用了第二个“

单击”

”句柄），但我认为您可以从这里开始

---

首先，您很抱歉，JSFIDLE缺少jQuery popover插件：我假设您希望包括

但真正的问题是这一行代码：

$(this).find('p:first').append('<span class="gear" ....

虽然它可能不完全是您想要的（因为您应用了第二个“

单击”

”句柄），但我认为您可以从这里开始

---

Bootstrap包含在fiddle中。Bootstrap.css包含在其中，而不是Bootstrap.js不抱歉遗漏了这一点，但是您的

popover（）

定义仍然位于错误的位置Bootstrap包含在fiddle中。Bootstrap.css包含在其中，而不是Bootstrap.js不抱歉遗漏了这一点，仍然是您的

popover（）

定义不正确非常感谢。。与此同时，我发现了与你指出的相同的东西。非常感谢。。与此同时，我发现了与您指出的相同的东西。您使用的是哪个jquery版本。live（）已弃用并从1.9 use insteadIt中删除，它在fiddle中使用1.7，在那里不起作用。您使用的是哪个jquery版本。live（）已被弃用，并从1.9 use insteadIt中删除，在fiddle中使用1.7，在那里不起作用。