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 に追加された後 ( after $('.gear').popover({...}))を呼び出す必要があります。.gear$(this).find('p:first').append(...)

于 2013-01-30T09:34:43.027 に答える
1

まず、JSFiddle に jQuery ポップオーバー プラグインがありません。これを含めたいと思います。

しかし、本当の問題は次のコード行です。

$(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);

(2 番目の " " ハンドルが適用されているため) 完全には望みどおりではないかもしれませんがclick、ここから取得できると思います。

JSFミドルプルーフ。

于 2013-01-30T09:36:52.617 に答える