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

У меня есть плагин 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().

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

Ответ 1

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

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

Ответ 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!

Ответ 3

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

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

И здесь живая демонстрация.

Ответ 4

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

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

Ответ 5

Интересно. По существу, вам нужно что-то вроде:

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

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

Ответ 6

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

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

Ответ 7

Что делать, если вы делаете что-то вроде этого?

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

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