jQuery обнаружения div определенного класса был добавлен в DOM

ранее можно было подключиться к jQuery domManip метод, чтобы поймать все манипуляции jQuery dom и посмотреть, какие элементы вставлены и т. д. но команда jQuery закрыла это в jQuery 3.0+, поскольку это, как правило, не очень хорошее решение для подключения к методам jQuery таким образом, и они сделали его таким внутренним domManip метод больше не доступен вне основного кода jQuery.

события мутации также были осуждены, как и раньше можно было что-то сделать как

$(document).on('DOMNodeInserted', function(e) {
    if ( $(e.target).hasClass('MyClass') ) {
       //element with .MyClass was inserted.
    }
});

этого следует избегать, и сегодня вместо этого следует использовать наблюдателей мутаций, которые будут работать так

var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        console.log(mutation)
        if (mutation.addedNodes && mutation.addedNodes.length > 0) {
            // element added to DOM
            var hasClass = [].some.call(mutation.addedNodes, function(el) {
                return el.classList.contains('MyClass')
            });
            if (hasClass) {
                // element has class `MyClass`
                console.log('element ".MyClass" added');
            }
        }
    });
});

var config = {
    attributes: true,
    childList: true,
    characterData: true
};

observer.observe(document.body, config);

вот мой плагин, который делает именно это -jquery.инициализировать

использование такое же, как вы бы использовать

после просмотра этого и нескольких других сообщений я попытался перегнать то, что я считал лучшим из каждого, во что-то простое, что позволило мне обнаружить, когда вставляется класс элементов, а затем действуйте на эти элементы.

function onElementInserted(containerSelector, elementSelector, callback) {

    var onMutationsObserved = function(mutations) {
        mutations.forEach(function(mutation) {
            if (mutation.addedNodes.length) {
                var elements = $(mutation.addedNodes).find(elementSelector);
                for (var i = 0, len = elements.length; i < len; i++) {
                    callback(elements[i]);
                }
            }
        });
    };

    var target = $(containerSelector)[0];
    var config = { childList: true, subtree: true };
    var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
    var observer = new MutationObserver(onMutationsObserved);    
    observer.observe(target, config);

}

onElementInserted('body', '.myTargetElement', function(element) {
    console.log(element);
});

что важно для меня, это позволяет а) целевой элемент существовать на любой глубине в пределах "addedNodes" и б) возможность работать с элементом только при первоначальной вставке (нет необходимости искать всю настройку документа или игнорировать "уже обработанные" флаги).

вы можете использовать события мутации

http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-mutationevents

редактировать

из MDN:https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Mutation_events

устаревший Эта функция была удалена из интернета. Хотя некоторые браузеры все еще могут поддерживать его, он находится в процессе удаления. Не используйте его в старых или новых проектах. Страницы или веб-приложения, использующие его, могут сломаться в любое время.

наблюдатели мутаций-это предлагаемая замена событий мутации в DOM4. Они должны быть включены в Firefox 14 и Chrome 18.

https://developer.mozilla.org/en/docs/Web/API/MutationObserver

MutationObserver предоставляет разработчикам способ реагировать на изменения в DOM. Он предназначен для замены событий мутации, определенных в спецификации событий DOM3.

пример использование

следующий пример был взят из http://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/.

// select the target node
var target = document.querySelector('#some-id');

// create an observer instance
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log(mutation.type);
  });    
});

// configuration of the observer:
var config = { attributes: true, childList: true, characterData: true };

// pass in the target node, as well as the observer options
observer.observe(target, config);

// later, you can stop observing
observer.disconnect();