我必须重构具有复杂UI的大型单页应用程序。
document.ready function
中有以下代码$('table.datatable').dataTable({ ... params ... });
$('div.tooltip').tooltip({ ... params ... });
$('ul.dropdownMenu').menu({ ... params ... });
正如您在此代码中看到的，我们搜索不同的HTML控件并调用适当的jQuery插件来实现这些控件的行为。
但是，由于页面是非常动态的新数据表，因此工具提示和菜单一直在添加，因为JS函数在应用程序的最初阶段被调用 - 除非我为它们手动调用适当的插件，否则这些元素没有所需的功能。 / p>
我想在每次更改DOM后不再需要调用jQuery插件，但不知道如何更好地完成它。
一种选择是每次向DOM添加任何内容时触发事件，并在事件的侦听器中重新调用此插件，但是我不喜欢这种解决方案，因为每次都需要记住触发事件。
我读到了jQuery的on函数，该函数还为尚未存在的元素附加事件，但我需要什么事件？ AFAIK没有domchange事件。
有任何建议吗？
答案 0 :(得分：1)
您唯一的选择是在将新项目添加到DOM后将其插入新项目。最好的跨浏览器选项是挂钩到每个将这些类型的元素添加到DOM的地方，并通过调用它们上的一些附加功能简单地处理那里的新项目。您需要查找的是，在将新元素添加到DOM之后，您可以轻松地挂钩现有代码，然后在此时修复这些新元素。在不知道您的代码以及修改DOM的位置的情况下，我们无法真正建议最好的方法。
使用单一方法通常以跨浏览器的方式监视DOM以获取新项目。 Mutation observers是执行此操作的最新标准方法，但在许多浏览器中尚不支持。 Mutation events来自变异观察者，但现在已被弃用。
jQuery的.on()不会在这里做你想做的事情 - 它可以用来处理动态添加的DOM元素，但不能用你想要的方式。您的插件可以设计为使用.on()来处理他们的事件，但除非它们是按照这种方式设计的，您可以利用它，但是没有一种简单的方法可以让您使用它来获取期望的行为，而不重写插件的一部分。