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

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

是否有一个事件可以用来处理这些 DOM 更改？

从最严格的意义上来说，你的问题是这样的：

//--- 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方法，因为它在实践中表现不佳。所以，我忘记了我有一个实用函数。

另外，正如雷诺斯提醒的那样，突变事件已被弃用 http://www.w3.org/TR/DOM-Level-3-Events/#_34。因此，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);
    }
}