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

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);
    }
}