0

当我将鼠标悬停在 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');    
});

我可能会犯任何菜鸟错误吗？

这是小提琴。

4

2 回答 2

2

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

演示：小提琴

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

于 2013-01-30T09:34:43.027 回答
1

首先，您的 JSFiddle 缺少 jQuery popover 插件：我假设您想要包含这个.

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

$(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 证明。

于 2013-01-30T09:36:52.617 回答