動的に作成された要素にイベントをバインドしますか? 質問する

Question

jQuery 1.7以降では、jQuery.fn.onセレクタパラメータが入力されている場合:

$(staticAncestors).on(eventName, dynamicChild, function() {});

説明：

これはイベント委任と呼ばれ、次のように機能します。イベントは、staticAncestors処理される要素の静的な親 ( ) にアタッチされます。この jQuery ハンドラーは、この要素または子孫要素の 1 つでイベントがトリガーされるたびにトリガーされます。次に、ハンドラーは、イベントをトリガーした要素がセレクター ( dynamicChild) と一致するかどうかを確認します。一致すると、カスタムハンドラー関数が実行されます。

これまでは、live():

$(selector).live( eventName, function(){} );

しかし、live()は 1.7 でに取って代わられon()、 1.9 で完全に削除されました。live()署名:

$(selector).live( eventName, function(){} );

...は次のように置き換えることができますon()サイン：

$(document).on( eventName, selector, function(){} );

たとえば、ページがクラス名を持つ要素を動的に作成している場合、dosomethingイベントを既存の親にバインドします（これがここでの問題の核心です。バインドする既存のものが必要であり、動的コンテンツにバインドしないでください）。これは（最も簡単なオプション）ですdocument。ただし、覚えておいてください。document最も効率的な選択肢ではないかもしれない。

$(document).on('mouseover mouseout', '.dosomething', function(){
    // what you want to happen when mouseover and mouseout 
    // occurs on elements that match '.dosomething'
});

イベントがバインドされた時点で存在する親であれば何でも構いません。例えば

$('.buttons').on('click', 'button', function(){
    // do something here
});

適用される

<div class="buttons">
    <!-- <button>s that are generated dynamically and added here -->
</div>

Answer 1