5

我有一个复杂的嵌套表单（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. 你知道这里可能会发生什么吗？

由于代码的极度复杂性和大量部分，我现在将其排除在外（希望您可能有预感！）。谢谢。

4

3 回答 3

3

根据 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）越近越好。

于 2012-04-09T06:26:37.140 回答
3

要使您的.on()代码正常工作，该.options元素必须是静态的 - 而不是动态创建的。第一个选择器.on()必须是静态父级。它就像.live()你使用的那样工作：

$(document).on('click', '.options .image', fn);

但是，如果您选择一个比对象更接近对象的静态父项（未创建或销毁的），您的页面将执行得更好document。由于您没有向我们展示您的 HTML，因此我无法推荐特定对象，但大概您可以挑选出正确的父对象。

于 2012-04-09T06:26:55.150 回答
0

下面是和的正确.on() 语法.live()

$(selector).live(events, data, handler);                // jQuery 1.3+
$(document).delegate(selector, events, data, handler);  // jQuery 1.4.3+
$(document).on(events, selector, data, handler);        // jQuery 1.7+

看更多：

on v/s live
on and off

于 2012-04-09T06:26:08.113 回答