[解決済み] 動的に生成された要素にイベントバインディングを行うか？

質問

ページ上のすべてのセレクトボックスに対してループ処理を行い、セレクトボックスに対して .hover イベントで、その幅を少し調整します。 mouse on/off .

これはページレディで発生し、問題なく動作します。

問題は、最初のループの後にAjaxやDOM経由で追加したセレクトボックスには、イベントがバインドされないことです。

このプラグインを発見しました( jQuery Live クエリプラグイン しかし、プラグインで私のページに別の5kを追加する前に、私は誰かがこれを行う方法を知っているかどうかを確認したい、jQueryを直接または他のオプションのいずれかを使用します。

どのように解決するのですか？

jQuery 1.7時点 を使用する必要があります。 jQuery.fn.on をセレクタパラメータで埋めてください。

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

説明

これはイベントデリゲーションと呼ばれ、次のように動作します。イベントは、静的な親 ( staticAncestors ) を処理する必要があります。この jQuery ハンドラは、この要素または子孫要素のいずれかでイベントがトリガーされるたびに起動されます。このハンドラは、イベントが発生した要素がセレクタ ( 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>