0

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

document.ready 函数中有以下代码

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

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

然而，由于页面是非常动态的新数据表、工具提示和菜单，并且由于 JS 函数在应用程序的一开始就被调用 - 这些元素没有必要的功能，除非我为它们手动调用适当的插件。

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

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

我读到了 jQuery 的on函数，它也为尚不存在的元素附加事件，但我需要什么事件？AFAIK 没有 domchange 事件。

有什么建议吗？

4

1 回答 1

1

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

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

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

于 2013-01-27T17:49:58.450 回答