jQuery 1.7以降では、以下を使用する必要がありますjQuery.fn.on
。
$(staticAncestors).on(eventName, dynamicChild, function() {});
これ以前は、次の方法をお勧めしました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>