jQuery: я могу автоматически применить плагин к динамически добавленному элементу?

Question

Я в процессе преобразования моего веб-приложения в полностью AJAX-архитектуру.

У меня есть главная страница, которая изначально загружена, и контейнер div, который загружается с динамическим контентом.

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

$(document).ready(function () {

    // Enable fancy AJAX search
    $(".entity-search-table").EntitySearch();

});

Это найдет соответствующий div (и) и вызовет плагин для включения необходимой функциональности.

ВСреда AJAX Я не могу просто применить плагин во время загрузки страницы, так как элементы будут добавляться и удаляться динамически.

Я хотел бы сделать что-то вроде этого:

$(document).ready(function () {

    // Enable fancy AJAX search
    $(".entity-search-table").live("load", function () {
        $(this).EntitySearch();
    });

});

Вопрос: Можно ли каким-либо образом вызвать событие, когда в DOM добавляется <div> или другой элемент, соответствующий селектору?

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

Спасибо за любую помощь!

Answer 1

Да - взгляните на liveQuery .Пример:

$('.entity-search-table').livequery(function(){ 
    $(this).EntitySearch(); 
});

Answer 2

Кажется невероятно расточительным активировать плагин каждый раз, когда выполняется запрос AJAX.Подключаемый модуль необходимо применять к элементу только один раз, когда он впервые добавляется в DOM.

Здесь вы можете получить лучшее из обоих миров, например:

$("#something").load("url", function() {
  $(".entity-search-table", this).EntitySearch();
});

Таким образом, он применяет плагин только к .entity-search-table элементам, которые вы просто загрузили, поскольку мы указали контекст для $(selector, context) для его ограничения.

Answer 3

MutationEvent DOM 2 - это то, что вам действительно нужно, но, к сожалению, оно не поддерживается IE. Вам нужно будет либо использовать live() / delegate() привязку в плагине, либо (как я делал, когда мне пришлось обойти это) использовать обратные вызовы от вашего Загрузчики AJAX с указанием объема изменений.

Answer 4

Используйте прямую привязку в коде вашего плагина

</p> <pre><code>jQuery.fn.EntitySearch = function() { this.live(..., function(){ your plugin code }); return this; }