jQuery: как вызвать функцию плагина jQuery для элемента, который еще не был добавлен в DOM?

Question

У меня есть плагин jQuery, который я использую:

$(document).ready(function(){
    $('.elements').fancyPlugin();
});

Это прекрасно работает, пока я не начну добавлять новые элементы:

$.get('ajax.html', function(data){
    $('#container').html(data);
});

Я мог бы снова вызвать функцию плагина следующим образом:

$.get('ajax.html', function(data){
    $('#container').html(data).find('.elements').fancyPlugin();
});

... за исключением того, что AJAX происходит внутри другого плагина jQuery, который не должен знать о fancyPlugin().

Как я могу применить этот плагин ко всемтекущие и будущие элементы?

Answer 1

Я думаю, что это будет работать во всех браузерах, кроме IE:

document.body.addEventListener("DOMNodeInserted", function(event){
    var $elementJustAdded = $(event.target);
    if ($elementJustAdded.hasClass('elements')) {
        $elementJustAdded.fancyPlugin();
    }
}, false);

Answer 2

Другой способ сделать это - создать собственное событие:

var container=$('#container');
$.get('ajax.html', function(data){   
   container.html(data);
   $('.elements',container).trigger('added.yourns');    
});

container.on('added.yourns','.elements',function(){
  $(this).fancyPlugin();
});

Затем, при добавлении элементов, просто вызвать событие с помощью метода trigger!

var aDiv=$('div');
aDiv.appendTo(someNode);
aDiv.trigger('added.yourns');

Выполнениетак что вы можете прикрепить любое поведение в любой файл JavaScript!

Answer 3

Если эти элементы добавляются с помощью AJAX, вы можете использовать метод .ajaxSuccess():

$('#container').ajaxSuccess(function(result) {
    $('.elements').fancyPlugin();
});

А вот и живая демонстрация .

Answer 4

Интересно. По сути, вы хотели бы что-то вроде:

$('selector').ready( ... do something ... );

Проблема в том, что такая логика недоступна. Загрузка элементов на страницу не вызывает каких-либо определенных событий, о которых я знаю, они просто наследуют CSS от узлов DOM над ними. Что бы я сделал, просто из функции успеха $.get запустил пользовательское событие. Остальная часть вашего кода может подключиться к этому событию, чтобы выполнить любую работу по перезагрузке плагина, которая может потребоваться. Вы можете передать список соответствующих селекторов вместе с событием и использовать его для вызова соответствующих плагинов (вы можете сохранить набор отношений selector -> plugin refresh function в хеш-таблице)

Answer 5

Что если вы сделаете что-то подобное?

$(document).ready(function(){
    $('.elements').live('load', function () {
        $(this).fancyPlugin();
    })
});

События не связываются повторно после вызовов AJAX или внутри содержимого, которое они возвращают. live() присоединяет обработчик к событию сейчас и в будущем. "

Answer 6

Вы смотрели на обработчик событий jQuery .live? Он автоматически связывается при добавлении нового элемента в dom, если он соответствует указанным требованиям.

http://api.jquery.com/live/

Answer 7

Пусть ваш обработчик AJAX вызовет какое-то пользовательское событие, например contentAdded, и связывает fancyPlugin с этим событием.

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