每次DOM更改jQuery时如何调用函数？

我需要确保页面保持我的脚本描述的方式，即使在DOM更改之后; 我的脚本必须处理对DOM的这些更改，以便我的脚本不仅处理初始状态。

是否有可用于处理这些DOM更改的事件？

Answer 1

从最严格的意义上提出你的问题，如下：

 //--- Narrow the container down AMAP. $("YOUR SELECTOR").bind ("DOMSubtreeModified", HandleDOM_ChangeWithDelay); var zGbl_DOM_ChangeTimer = null; function HandleDOM_ChangeWithDelay (zEvent) { if (typeof zGbl_DOM_ChangeTimer == "number") { clearTimeout (zGbl_DOM_ChangeTimer); zGbl_DOM_ChangeTimer = ''; } zGbl_DOM_ChangeTimer = setTimeout (HandleDOM_Change, 333); } function HandleDOM_Change () { // YOUR CODE HERE. } 

请注意，您需要中间延迟function，因为更改将在Youtube或Google等网站上以10到100个事件的集群forms出现。

您只想触发群集的最后一个事件 – 即您关注的更改完成时。

---

---

重要：

我使用DOMSubtreeModified方法已经有一段时间了，因为它在实践中表现不佳。 所以，我忘了我有一个实用function。

此外，正如Raynos提醒的， 突变事件已被弃用 。 因此，Firefox可能会在未来的某个版本中停止支持这些事件。

另一个问题：如果您的脚本也更改了您正在监视的容器中的节点，则脚本可能会陷入无限循环/递归。

这是避免循环（和全局变量）的代码：

 function HandleDOM_Change () { // YOUR CODE HERE. } //--- Narrow the container down AMAP. fireOnDomChange ('YOUR JQUERY SELECTOR', HandleDOM_Change, 100); function fireOnDomChange (selector, actionFunction, delay) { $(selector).bind ('DOMSubtreeModified', fireOnDelay); function fireOnDelay () { if (typeof this.Timer == "number") { clearTimeout (this.Timer); } this.Timer = setTimeout ( function() { fireActionFunction (); }, delay ? delay : 333 ); } function fireActionFunction () { $(selector).unbind ('DOMSubtreeModified', fireOnDelay); actionFunction (); $(selector).bind ('DOMSubtreeModified', fireOnDelay); } } 

Answer 2

如果您正在谈论在document.ready上可能不存在的DOM元素上的绑定事件，那么您现在或将来可以使用.on（）或.live（）绑定到与提供的选择器匹配的任何元素。