每次添加具有指定选择器的元素时执行 JS 函数

Execute JS function each time element with specified selector is added

本文关键字：元素 执行 函数 JS 选择器 添加      更新时间：2023-09-26

我必须用复杂的UI重构大型单页应用程序。

document.ready 函数中有以下代码

$('table.datatable').dataTable({ ... params ... });
$('div.tooltip').tooltip({ ... params ... });
$('ul.dropdownMenu').menu({ ... params ... });

正如你在这个代码中看到的，我们搜索不同的HTML控件，并调用实现这些控件行为的适当jQuery插件。

但是，由于

页面是非常动态的，因此一直在添加新的数据表，工具提示和菜单，并且由于JS函数是在应用程序一开始就调用的 - 除非我手动为它们调用适当的插件，否则这些元素没有所需的功能。

我想消除在每次 DOM 更改后调用 jQuery 插件的需要，但不知道如何做得更好。

一种选择是每次向 DOM 添加任何内容时触发一个事件，并在事件的侦听器中重新调用此插件，但是我不喜欢这个解决方案，因为每次都需要记住触发事件。

我阅读了有关jQuery的on函数，该函数也为尚不存在的元素附加事件，但是我需要什么事件？AFAIK没有改变事件。

有什么建议吗？

您唯一的选择是在将插件添加到 DOM 后将插件挂接到新项目上。 最好的跨浏览器选项是挂接到将这些类型的元素添加到 DOM 的每个位置，并通过对它们调用一些附加函数来简单地处理那里的新项目。 您需要寻找的是，在将新元素添加到 DOM 后，您可以轻松地挂接到现有代码，然后在那时修复这些新元素。 如果不了解您的代码以及 DOM 的修改位置，我们就无法真正建议最佳方法。

通常，使用单一方法监视 DOM 中的新项是不可能的跨浏览器方式。 突变观察器是执行此操作的最新标准方法，但许多浏览器尚不支持它。 突变事件先于突变观察者出现，但现在已被弃用。

jQuery的.on()不会在这里做你想要的 - 它可以用来处理动态添加的DOM元素，但不能以你想要的方式。 您的插件本可以设计为使用 .on() 来处理其事件，但除非它们是这样设计的并且您可以利用这一点，否则没有一种简单的方法可以让您使用它来获得所需的行为而无需重写插件的一部分。

相关文章：