jquery - jQuery 1.7.1 on() 不工作而 live() 工作

Question

我有一个简单的代码片段

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

问题是我想on()按live()已弃用的方式使用，但是如果我在上述情况下使用on - 我没有得到“点击”，而如果我用live替换on ，它就像轻而易举。

可能是什么问题？

Answer 1

主选择器应位于WRAPPER ELEMENT

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

Answer 2

相当于：

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

...事实上，如果您从 1.7 开始查看 jQuery 源代码，live就是这样。

现在，就是说，我强烈建议将点击挂在靠近目标元素的地方，而不是一直挂在document. 但是对于字面上的等价物，如果所讨论的元素确实没有其他共同的祖先，那就是你会做的。

Answer 3

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

或者您可以使用委托（）

$(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');   
});