AJAXを介して読み込まれたjQueryコンテンツは、最初のページのロードバインディングから除外されます

Question

最初にページを読み込むと、特定のCSSクラスを使用してすべてを選択して、次のようにツールチップを添付します（ "doTooltip"クラス）：

$(document).ready(function() { 
    $('.doTooltip').tooltip(); 
}); 

これは素晴らしいです。しかし、AJAXを介してページに追加のコンテンツを読み込むと、doTooltipクラスが適用された新しい要素はready（）イベントの後にロードされたため、.tooltip（）が実行されません。

doTooltipを使用する新しくロードされた要素に.tooltip（）を適用するようにjQueryに指示するにはどうすればよいですか？

また、提供されたコードを関数に取り込み、ページに新しいコンテンツを読み込むたびにこの関数を呼び出す唯一のソリューションですか？私は提供されたコードをグローバルに使用するので、これよりも良い方法があることを望んでいます。

Answer 1

"jquery.fn.on"を使用する必要があります。この例は次のようになります。

$(document).on('mouseover', '.doTooltip', function(){ 
    $(this).tooltip(); 
}); 

私には分かりますか？私が似たような問題に直面したとき、それは私のために働いた。

あなたの内心がこのハックを受け入れない場合は、新しい "doTooltip"要素の追加をポーリングするためにオブザーバーをドキュメント本体に関連付け、新しく挿入された要素にツールチップを適用してください。 オブザーバーアプローチのコードが必要かどうかお知らせください。