jQuery on() 方法不会像 live() 那样绑定事件答案

【问题标题】：jQuery on() method does not bind events like live() didjQuery on() 方法不会像 live() 那样绑定事件
【发布时间】：2016-08-04 18:45:19
【问题描述】：

从 jQuery 1.7 开始，不推荐使用 .live() 方法。使用 .on() 附加事件处理程序。

没错。 所以不是

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

我应该使用：

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

但是它不会将事件绑定到在on() 调用之后创建的元素。那么live() 方法真的更好吗？

我错过了什么吗？

【问题讨论】：

jQuery 1.7 - Turning live() into on()的可能重复
如果您只是在链接到的文档中进一步阅读（第三段）：“根据其后继方法重写.live() 方法很简单；这些是等效调用的模板对于所有三种事件附加方法：$(document).on(events, selector, data, handler); // jQuery 1.7+".
@FelixKling 谢谢，之前没找到。
很高兴您提出这个问题。人们经常建议它们是相同的，而实际上它们不是（这是一个令人讨厌的变化 IMO）。

标签： jquery

【解决方案1】：

要以与 live 过去相同的方式使用 on，您需要像这样使用它：

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

因此，您将on 处理程序绑定到document 本身（或者，实际上，新元素将“出现”的容器元素——感谢@devnull69 的澄清），然后将其传递给一个事件类型和选择器。

您会在 live 文档页面的中途找到几个示例。

【讨论】：

不一定是$(document)。第一个选择器可以是动态创建元素的任何已经存在的父/容器元素
好的，没错，只要新元素将出现在该父/容器中。 - 我更新了我的答案；谢谢。
确实，您应该尽量避免在这些情况下使用$(document).on(...)，因为这在过去的 Safari 浏览器中造成了问题，其中click 事件不会一直冒泡到 @ 987654334@:stackoverflow.com/questions/10165141/…
当主体加载为空然后动态加载所有内容时，'on()' 函数对我来说似乎总是有问题，而 'live()' 一直运行良好。当一切都是动态的时，'on()' 函数是一个完全可用的野兽！在这种情况下，与上面@devnull69 所述相反，它仅在我使用'$（document）'时才有效。
...这与我上面所说的并不矛盾:-)

【解决方案2】：

$('#closestStaticParent').on('click', '.dynamicallyCreatedElement' function(){
    console.log('click');
});

【讨论】：

【解决方案3】：

用作委托（）

$('body').on('click', '.dynamicallyCreatedElement', function () {
});

编辑：每个人都明白，当使用 delegate() 时，选择器是第一个参数，而 on() 是第二个参数。

【讨论】：

【解决方案4】：

我发现需要在 on 中使用这种方法：

$('#container').on('click','.dynamicallyCreatedElement',function(){
    console.log('click');
});

【讨论】：