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方法已经有一段时间了，因为它在实践中表现不佳。所以，我忘了我有一个实用功能。

另外，正如雷诺斯提醒的，mutation events are deprecated。因此，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()绑定到与提供的选择器匹配的任何元素，现在或将来。

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

2 个答案: