jquery - 我的 .on() 的行为类似于 .bind()，而不是 .live()

Question

我有一个复杂的嵌套表单(Ryan Bates 的版本)，其中 .live() 附加到一些动态生成的元素，我现在将其转换为 .on( ) 以及从 Jquery 1.4 到 1.7 的升级。

以下是约 22 项更改之一的示例:

# old version with .live()
$('.options .image').live('click', function(){
    console.log('clicked .options')
})

# new version with .on()
$('.options').on('click', '.image', function(){
    console.log('clicked .options')
})

这些更改对于已经存在的表单元素来说效果非常好，但对于之后动态创建的任何嵌套元素来说却失败了。因此，它的工作方式更像是 Jquery 的 bind，而不是 live。你知道这里会发生什么吗？

由于代码极其复杂并且有很多部分内容，我现在将其保留(希望您可能有预感!)。谢谢。

Answer 1

根据 3nigma 的评论，但使用原始选择器进行修改，这将起作用:

$(document).on('click', '.options .image', function() {
  console.log('clicked .options');
});

但是，我不认为将文档设置为监听器通常是正确的方法。在使用 .live() 的原始版本中，您在 .options 节点中选择 .image 节点。

但是问题没有说明哪些部分是动态加载的。我怀疑 .options 也是动态加载的内容的一部分。使用 .on() 委派监听器时的第一个选择器必须是不会被破坏的东西:

$('#someWrapper').on('click', '.options .image', function() {
  console.log('clicked .options');
});

#someWrapper 不需要是一个新的包装元素，它可以是任何祖先(有些人称之为“ parent ”......但这是一个用词不当，因为它可以是祖 parent 或曾祖 parent 或其他什么!)，但没有被破坏。距离目标选择器 (.options .image) 越近越好。