Как я вызываю функцию каждый раз, когда 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.
}

Обратите внимание, что вам нужна функция промежуточной задержки, потому что изменения будут происходить в группах от 10 до 100 событий на сайте, таком как Youtube или Google.

Вы хотите запустить только последнее событие кластера - вот когда изменение, о котором вы заботитесь, закончено.

---

---

ВАЖНО:

Прошло много времени с тех пор, как я использовал DOMSubtreeModified подход, потому что он плохо работает на практике. Итак, я забыл, что у меня есть служебная функция для него.

Также, как напоминает Райнос, события мутации не рекомендуются . Поэтому 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, которые могут отсутствовать в document.ready, то вы можете использовать .on () или .live () для привязки. к любому элементу, который соответствует предоставленному селектору, сейчас или в будущем.