将所有 jQuery 脚本转换为实时脚本

convert all jquery scripts to live scripts

本文关键字:脚本 转换 实时 jQuery      更新时间:2023-09-26

我有很多jquery脚本不处理动态加载或创建的元素,当然我可以转换我所有的scrits并将它们添加到.live()函数中。但是想知道是否有任何选项或技巧可以自动模拟所有脚本中的实时函数,而无需手动逐个修改它们。

感谢您的评论,实时已贬值,所以我使用 .on() 函数重申我的问题。

没有一个技巧可以使所有现有的事件处理程序代码在不更新每个事件处理程序的情况下使用动态加载的元素,除非您想将某些 jQuery 方法替换为与 jQuery 记录的方法不同的方法(不推荐)。 您必须将当前使用的所有 jQuery 事件处理方法替换为强制委托事件处理的方法。 这将是一个糟糕的方法。 你不仅会把jQuery黑客入侵到与它所记录的不同的东西中,并暴露自己与其他代码的兼容性问题,而且你会被迫使用委托事件处理的最低效(这就是为什么.live()首先被删除)。 不要这样做。 修复代码以使用正确的委托事件处理方法。 一点也不难。


.live()已被弃用,甚至从最新版本的jQuery中删除。 你不应该使用它。 有一种形式的.on()允许您对动态加载的对象使用委托事件处理。 您可以在这篇文章中看到如何使用正确的.on()形式来动态加载的元素:jQuery .live() 与 .on() 方法,用于在加载动态 html 后添加点击事件。

对动态元素使用 .on() 的"正确"方法是这样的:

$('#parent').on("click", "#child", function() {});

在其中,选择最接近其本身未动态加载的动态元素的父元素,并将事件处理程序绑定到该元素。


.live()被删除,因为它将所有委托的事件处理程序放在document对象上,有点类似于以下内容:

$(document).on("click", "#child", function() {});

但是,如果您使用了许多这样的委托事件处理程序,则性能可能会开始下降。 这是因为当您以这种方式执行此操作并单击文档中的任意位置并且该单击冒泡到文档时,它必须将每个.live()事件处理程序中的每个选择器与当前单击的对象进行比较。 由于选择器比较并不总是很快,这确实会阻碍事件的处理。

当您将事件处理程序放置在更靠近实际对象的对象上时,您最终会得到那里很远的事件处理程序,因此要比较的选择器要少得多,并且事件的处理速度更快。


下面是静态事件处理程序和委托事件处理程序之间一些差异的参考,以及一些有用的说明: JQuery 事件处理程序 - 什么是"最佳"方法