26

Twitterのブートストラップポップオーバーを使用していますが、

ポップオーバーでボタンを追加していますが、

ボタンにハンドラーをアタッチする必要がありclickますが、ポップオーバーが機能する方法は、要素を表示/非表示にするのではなく、要素を削除して再作成するたびに、そのボタンに関連付けられているイベントハンドラーを削除することです。

私はいくつかのポップオーバーをすべて独自のバージョンのボタンで作成しているので、クラスをポップオーバーに適用するだけでは機能しません (それぞれに異なるクラスを生成しない限り:/)、ボタンには独自の ID がある場合とない場合があります。であるため、ID を適用できません。

Twitter ブートストラップ ポップオーバーの内容にイベント ハンドラを適用するにはどうすればよいですか?

4

7 に答える 7

36

私も同じ問題を抱えていましたが、私の場合、$(body).on('click')アプリケーションには多くのクリック ボタンがあるため、回避策は機能しません。

代わりに次のことを行いました。このようにして、デリゲート イベントのスコープを popover 要素の親だけに制限できます。

$('a.foo').popover({
    html: true,
    title: 'Hello',
    placement: 'bottom',
    content: '<button id="close-me">Close Me!</button>'
}).parent().delegate('button#close-me', 'click', function() {
    console.log('World!');
});

JS フィドル: http://jsfiddle.net/dashk/5Yz7z/

PS私Backbone.Viewは自分のアプリケーションでこの手法を使用しました。Backbone.jsこれを同様に使用している場合に備えて、Fiddle のコードのスニペットを次に示します...: http://jsfiddle.net/dashk/PA6wY/

EDITED Bootstrap 2.3では、ポップオーバーが追加されるターゲットコンテナを指定できます。これで、.parent() ロケーターを実行する代わりに、コンテナーに固有のイベントをリッスンすることもできます...これにより、リスナーをさらに具体的にすることができます (ポップオーバーを含めるためだけに存在する DIV を作成することを想像してください)。

于 2013-02-08T19:15:32.493 に答える
27

これでうまくいくはずです。これにより、.popover クラスを使用して要素内に作成された既存および将来のボタン要素が処理されます。

$('body').on('click', '.popover button', function () {
    // code here
});
于 2012-11-03T02:11:45.077 に答える
11

私のために働いた非常に簡単な解決策は次のとおりです。

// suppose that popover is defined in HTML
$('a.foo').popover(); 

// when popover's content is shown
$('a.foo').on('shown.bs.popover', function() {
    // set what happens when user clicks on the button
    $("#my-button").on('click', function(){
        alert("clicked!!!");
    });
});

// when popover's content is hidden
$('a.foo').on('hidden.bs.popover', function(){
    // clear listeners
    $("#my-button").off('click');
});

これが機能する理由: 基本的に、ポップオーバーのコンテンツには、ポップオーバーが開かれるまでリスナーがありません。

ポップオーバーが表示されると、ブートストラップはそのイベントを発生させますshown.bs.popover。$(a.foo)jQueryonメソッドを使用して、このイベントにイベント ハンドラーをアタッチできます。そのため、ポップオーバーが表示されると、ハンドラー (コールバック) 関数が呼び出されます。このコールバックでは、イベント ハンドラーをポップオーバーのコンテンツにアタッチできます。たとえば、ユーザーがポップオーバー内のこのボタンをクリックするとどうなりますか。

ポップオーバーが閉じられたら、ポップオーバーのコンテンツにアタッチされているすべてのハンドラーを削除することをお勧めします。これは、jQueryメソッドhidden.bs.popoverでハンドラーを削除するハンドラーを介して行われます。.offこれにより、ポップオーバーが再び開かれたときに、ポップオーバー内のイベント ハンドラーが 2 回 (およびそれ以上) 呼び出されるのを防ぎます...

于 2015-03-06T14:12:25.067 に答える
0

これを試して

var content = function() {
    var button = $($.parseHTML("<button id='foo'>bar</button>"));
    button.on('click', '#foo', function() {
        console.log('you clicked me!');
    } );
    return button;
};

$( '#new_link' ).popover({
    "html": true,
    "content": content,
});
于 2013-07-03T20:42:52.203 に答える