Примечание автора (pie6k). Я создал эту библиотеку несколько лет назад, и тогда она была хороша. Вероятно, вам не следует использовать jQuery для подобных вещей и использовать React или что-то подобное. Спасибо. — 21 ноября 2018 г.
Сообщения об ошибках по-прежнему принимаются.
Плагин jQuery.initialize
создан для поддержки динамически создаваемых элементов на странице.
jQuery.initialize будет перебирать каждый элемент, соответствующий селектору, и применять функцию обратного вызова. Затем он будет прослушивать любые изменения в объектной модели документа и применять функцию обратного вызова ко всем новым элементам, вставленным в документ, которые соответствуют исходному селектору.
$.initialize([selector], [callback]);
Это позволяет разработчикам определить обратный вызов инициализации, который применяется всякий раз, когда в DOM вставляется новый элемент, соответствующий селектору. Это работает и для элементов, загруженных через AJAX.
Простая демонстрация — нажмите здесь
$.initialize(".some-element", function() {
$(this).css("color", "blue");
});
Но теперь, если на странице появится новый элемент, соответствующий селектору .some-element
, он будет мгновенно инициализирован. Способ добавления нового элемента не имеет значения, вам не нужно заботиться об обратных вызовах и т. д.
$("<div/>").addClass("some-element").appendTo("body"); //new element will have blue color!
Чтобы прекратить наблюдение за документом, вы можете отключить наблюдателя, вызвав disconnect()
на возвращаемом экземпляре MutationObserver
, который не позволяет ему получать дальнейшие уведомления до тех пор, пока observe()
не будет вызван снова. . Например,
var obs = $.initialize([selector], [callback]); // Returns MutationObserver
obs.disconnect();
target
По умолчанию на предмет изменений отслеживается весь документ. Это может привести к ухудшению производительности. Конкретный узел в DOM можно наблюдать, указав цель:
$.initialize(".some-element", function() {
$(this).css("color", "blue");
}, { target: document.getElementById('observe-this-element') });
В противном случае target по умолчанию будет иметь значение document.documentElement
.
observer
Может быть предоставлен собственный MutationObserverInit
. Если этот параметр не указан, по умолчанию будет использоваться внутренняя конфигурация.
Плагин основан на MutationObserver
. Он будет работать в IE9+ ( читайте примечание ниже ) и в любом современном браузере.
Примечание. Чтобы он работал в IE9 и IE10, вам нужно добавить полифил MutationObserver, например, здесь: https://github.com/webcomComponents/webcomComponentsjs.
Тест производительности (спасибо @bezborodow и @liuhongbo )
bower
и npm
, добавьте расширенный тест производительности.