web-dev-qa-db-ja.com

バインドする方法bootstrap動的要素のツールチップ

Bootstrapツールチップを使用する場合、ツールチップ機能を使用するには、次のように記述する必要があります。

$(".showtooltip").tooltip();

しかし問題は、新しいコンテンツがajax経由で読み込まれるたびに、そのコードを再実行する必要があることです。とにかくコードを一度実行して、新しい要素が読み込まれたときにツールチップを自動的に適用する方法はありますか？

ありがとうございました。

jquerytwitter-bootstrap-3tooltip
21
user1995781

selectorプロパティを使用する必要があります。 ドキュメントを参照してください。

「セレクターが提供されている場合、ツールチップオブジェクトは指定されたターゲットに委任されます。実際には、これは動的HTMLコンテンツにツールチップを追加できるようにするために使用されます。 this および 有益な例を参照してください 。」

JSサンプルコード：

$('body').tooltip({
    selector: '.createdDiv'
});

$('#add-button').click(function() {
    $('<div class="createdDiv" data-toggle="tooltip" title="Some tooltip text!">Hover over me</div>').appendTo('#container');
});

[〜＃〜] demo [〜＃〜]

37
Elfayer

これを試して：

$('body').tooltip({
    selector: '[data-toggle="tooltip"]'
});
25
Aliti