如何在jQuery中每次DOM更改时调用函数?

Question

我需要确保页面保持我的脚本描述的方式，即使在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.
}

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

您只希望在集群的最后一个事件上触发—即当您关心的更改完成时。

---

---

重要:

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

另外，正如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

如果您正在讨论在文档中可能不存在的DOM元素上绑定事件。准备好之后，你就可以使用.on()或.live()绑定到任何与所提供的选择器匹配的元素，无论是现在还是将来。