我的.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()选择节点。.image.options

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

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

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