我有一个复杂的嵌套表单(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
。你知道这里会发生什么吗?
由于代码极其复杂并且有很多部分内容,我现在将其保留(希望您可能有预感!)。谢谢。
最佳答案
根据 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) 越近越好。
关于jquery - 我的 .on() 的行为类似于 .bind(),而不是 .live(),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10069674/