web-dev-qa-db-ja.com

Bootstrap Popover、.popover内のボタンがキャッチされない

まず、問題のフィドル： jsfiddle.net

私はポップオーバーを使用していますが、そのコンテンツはhtml、「click_me」クラスのボタンです。 「click_me」のクリックをリッスンするjqueryがあり、アラートをスローする必要があります。しかし、そうではありません。何か不足していますか？

JS：

jQuery(document).ready(function($) {

$('.demo_button').click(function () {
    $(this).popover({
                html: true,
                trigger: 'manual',
                placement: 'right',
                content: function () {
                    var $buttons = $('#popover_template').html();
                    return $buttons;
                }
    }).popover('toggle');
});

$('.click_me').click(function() {
    alert('it works!');
});

});

HTML：

<button class="btn btn-primary demo_button">Click here</button>

<div id="popover_template">
    <button class="btn click_me">Make Alert</button>
</div>
jqueryhtmltwitter-bootstrappopover
26
Tim Habersack

.click（）は、on（）を使用する必要があるロード時に存在する要素に対してのみ機能します

$(document).on("click", ".click_me", function() {
    alert('it works!');
});
51
Stefan

問題は、イベントを受け取る準備ができていない要素にイベントを添付していることです。イベントを親要素にアタッチしてから、要素をフィルタリングできます。このように、クリック可能な要素がいつ表示されるかは問題ではなく、機能します。

<div class="container"><br />
    <button class="btn btn-primary demo_button">Click here</button>

    <div id="popover_template">
        <button class="btn click_me">Make Alert</button>
    </div>
</div>

 $('.container').on("click", ".click_me", function() {
     alert('it works!');
 });

また、これを行うときは、ツリーの上位にある親にアタッチしないでください。可能な限り最も近い親要素に添付します。 documentのようなものにクリックイベントを設定する必要はありません。このイベントを取得する要素を特定することをお勧めします。 documentにアタッチすると、click_meのクラスを持つ要素がクリック可能になり、同じコードに応答するようになります。異なるボタンに異なる機能を持たせたい場合、documentに接続された同じコードにすべて応答しているため、できません。

ところで、これはあなたの fiddle です。

3
Jonny Sooter

以下を試してください：

jQuery(document).ready(function($) {

    $('.demo_button').click(function () {
        $(this).popover({
                html: true,
                trigger: 'manual',
                placement: 'right',
                content: function () {
                    var $buttons = $('#popover_template').html();
                    return $buttons;
                }
         }).popover('toggle');
         $('.click_me').off('click').on('click', function() {
             alert('it works!');
         });
    });
});

DOMの準備ができたら、ボタンはまだ作成されていません。これを行うと、ポップオーバーが発生するたびに、作成したボタンのイベントを処理できます。

2
Markus Fantone

Use：show.bs.popover-このイベントは、show instanceメソッドが呼び出されるとすぐに起動します。

$('#myPopover').on('hidden.bs.popover', function () {
  // bind your button click event here
})
0
sra