Запуск сценария на основе динамически сгенерированного элемента DOM

Question

Я работаю со сторонним продуктом. Он использует код JavaScript (не JQuery) на странице для создания элементов DOM на лету.

Можно ли запускать скрипт jQuery всякий раз, когда этот сторонний код генерирует элемент DOM, соответствующий заданному селектору?

Чтобы объяснить по-другому, я не хочу пытаться интегрироваться с этим кодом. Я просто хочу посмотреть, какие определенные элементы будут созданы, что является сигналом для запуска моего собственного пользовательского jQuery.

Answer 1

За исключением событий мутации DOM, о которых упоминает Рейнис, я могу придумать три варианта:

1) Если вы хотите просто обработать события для новых элементов, вы можете использовать jQuery Live

2) Вы можете использовать setTimeout для периодической проверки DOM на наличие новых элементов.

3) Если вам захочется погрузиться в сторонний код (для понимания, а не для прямого изменения), вы можете затем предоставить функциональное переопределение, которое уведомляет вас, явно, когда их функция выполняется

var oldFunc = thirdParty.theirFunc;
thirdParty.theirFunc = function(){ 
    oldFunc();

    // alert myself of the change.
    myDomChangedFunction();
};

Таким образом, вы фактически не изменяете их источник напрямую, просто функционально:)

Answer 2

Есть так называемые события мутации DOM . Я не уверен, насколько хорошо они поддерживаются во всех браузерах, поскольку у меня до сих пор не было возможности их использовать. Они даже не перечислены в таблицах совместимости ppk .

Answer 3

В зависимости от того, какие браузеры вам нужно поддерживать, вы можете использовать события мутации DOM, на которые ссылается Рейнис.

Вот интернет-ресурс для тестирования ваших целевых браузеров: http://www.gtalbot.org/DHTMLSection/DOM2MutationEvents.html

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

Answer 4

Если вызов AJAX изменил вашу DOM и вы хотите использовать jQuery, взгляните на

.ajaxComplete()

источник: http://api.jquery.com/ajaxcomplete/ который прослушивает любой ajax-вызов.

или для обработки любых изменений в дереве DOM используйте

MutationObserver

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

    // select the target node
    var target = document.getElementById('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();

и больше от разработчика Mozilla:

https://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/

Answer 5

проверьте "живые" привязки событий jQuery, это может помочь: http://docs.jquery.com/Events/live

Добавлено в jQuery 1.3: привязывает обработчик к событию (например, нажатию) для всех текущих и будущих элементов. Может также связывать пользовательские события.

Answer 6

Исходя из документации jquery, похоже, что load() можно использовать с любым элементом, а не только с элементами типа окна / документа. Поэтому, если вы знаете, какими будут элементы (id, класс), вы можете просто связать jquery с этими селекторами с помощью load() и делать то, что вам нужно.