jquery - live（）の動作中にjQuery 1.7.1 on（）が動作しない

Question

簡単なコードスニペットがあります

$('.box_tile_image').live('click', function() {
console.log('click');   
});

問題は、非推奨のまま使用on()したいのですが、上記の場合に使用すると、「クリック」が表示されませんが、ライブに置き換えると、そよ風のように機能します。live()

何が問題になる可能性がありますか？

Answer 1

同等のものは次のようになります。

$(document).on('click', '.box_tile_image', function() {
    console.log('click');   
});

...実際、1.7以降のjQueryソースを見ると、それだけですlive。

とはいえ、でずっと上に行くのではなく、ターゲット要素に近いものをクリックすることを強くお勧めしますdocument。しかし、文字通り同等の場合、問題の要素に他の共通の祖先が実際にない場合は、それを実行します。

Answer 2

メインセレクターはラッパー要素上にある必要があります

$('#MyWrapperElement').on('click',".box_tile_image",function() {
console.log('click');   
});

Answer 3

$(document).on('click', '.box_tile_image', function() {
    console.log('click');   
});

または、 delegate（）を使用できます

$(document).delegate('.box_tile_image', 'click', function() {
    console.log('click');   
});

代わりに、のdocument任意の祖先を使用することもできますbox_title_image。

次のようなDOMがあるとします。

<div id="container">
  <img class="box_tile_image" src="" alt="">
</div>

次に、次のように書くことができます。

$('#container').on('click', '.box_tile_image', function() {
    console.log('click');   
});

また

$('#container').delegate('.box_tile_image', 'click', function() {
    console.log('click');   
});