Question

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

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

出于某种原因，弹出窗口根本不会触发。

我的HTML：

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

我的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');    
});

我可能正在做的任何noob错误？

这是fiddle。

Answer 1

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');    
});

演示：Fiddle

您需要在创建$('.gear').popover({...})元素后调用.gear并附加到dom（$(this).find('p:first').append(...)之后）

Answer 2

首先，你是JSFiddle缺少jQuery popover插件：我假设你想要包含this one。

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

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

当您悬停.kpi时，您正在动态创建具有特定类的范围。 .popover的初始化已经执行，并且不会再次为此类执行。我们需要再次为新创建的元素应用它：

var span = $('<span class="gear" style="margin-left: 10px; position: absolute;"><i class="icon-cog"></i></span>');

span.popover({
    title: "title",
    content: "click me",
    trigger: "click"
});

$(this).find('p:first').append(span);

虽然它可能不完全是您想要的（因为您应用了第二个“click”句柄），我假设您可以从此处获取它。

<强> JSFiddle proof

Bootstrap popover不会触发刚添加到DOM的元素

2 个答案: