jQuery.on（） - 要素がロードされるとすぐに初期化する方法

Question

hoverIntentプラグインをページの要素に追加しようとしていますが、後でDOMにいくつかの要素が追加されます。将来の要素にもプラグインをバインドする必要があります。あなたはどうやってそれをしますか？私は同じ質問を数回見ましたが、誰も明確な解決策を持っていませんか？

Answer 1

これを行うためのjQueryのサポートはありません。それはプラグイン自体がサポートしなければならないものです。最も一般的なアプローチは、新しいコンテンツを追加した後にプラグインを単純に再初期化することです。これは通常問題ではありません。

もう1つの方法はliveQuery pluginを使用してこのようなことをすることです。

$('yourSelector').livequery(function() { 
    $(this).hoverIntent({ 
     // blah 
    }); 
}); 

Answer 2

これを実現する最善の方法は、新しい要素をページに追加するときにカスタムイベントを発生させることです。このイベントのサブスクライバは、適切なhoverIntent初期化子を呼び出すことができます。

さらにネイティブサポートがmutation observersの形式で行われますが、ブラウザサポートは現在はnilの隣にあります。

イベントDOMSubtreeModifedのリッスンは信頼できず、パフォーマンス上の大きな問題が発生します。

Answer 3

jqueryの構造を変更しようとしました。

ABC = { 
    init: function() {//all function names goes here 
     ABC.myFunction1(); 
     ABC.myFunction2(); 
     ABC.myFunction3(); 
    }, 
    myFunction1: function() { 
    //code 
    }, 
    myFunction2: function() { 
    //code 
    }, 
    myFunction3: function() { 
    //code 
    }//dont put comma last one 
} 

$(function() { 
    ABC.init();//calls all functions after everything is initialized and ready. 
}); 

Answer 4

イベント委譲のための "セレクタ" パラメータを使用します。

$('#PARENT').hoverIntent({ 
    over: function() { 
     console.log($(this)); 
    }, 
    out: function(){ 
     console.log($(this)); 
    }, 
    selector: '.CHILD' 
}); 

出典：hoverIntent Documentation