У меня есть плагин 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().
Как я могу применить этот плагин ко всем текущим и будущим элементам?
Я думаю, что это будет работать во всех браузерах, кроме IE:
document.body.addEventListener("DOMNodeInserted", function(event){
var $elementJustAdded = $(event.target);
if ($elementJustAdded.hasClass('elements')) {
$elementJustAdded.fancyPlugin();
}
}, false);
Другой способ сделать это - создать собственное событие:
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!
Если эти элементы добавлены с помощью AJAX, вы можете использовать метод .ajaxSuccess():
$('#container').ajaxSuccess(function(result) {
$('.elements').fancyPlugin();
});
И здесь живая демонстрация.
Попросите обработчик AJAX создать какое-то пользовательское событие, например contentAdded, и привяжите fancyPlugin к этому событию.
В качестве альтернативы вы можете использовать события мутации DOM для вызова fancyPlugin для любых изменений в контейнере. Родная поддержка браузера еще не совсем там, но есть плагины, которые должны позаботиться об этом.
Интересно. По существу, вам нужно что-то вроде:
$('selector').ready( ... do something ... );
Проблема в том, что некоторая логика недоступна. Загрузка элементов на странице не вызывает каких-либо конкретных событий, о которых я знаю, они просто наследуют CSS от узлов DOM над ними. То, что я сделаю, просто, из функции успеха $.get, вызывает пользовательское событие. Остальная часть вашего кода может подключиться к этому событию, чтобы выполнить любую перезагрузку плагина, которая может потребоваться. Вы можете передать список релевантных селекторов с событием и использовать его для вызова соответствующих плагинов (вы можете сохранить набор отношений selector -> plugin refresh function в хеш-таблице)
Вы посмотрели на обработчик события jQuery.live? Он автоматически связывается, когда новый элемент добавляется в dom, если он соответствует указанным требованиям.
Что делать, если вы делаете что-то вроде этого?
$(document).ready(function(){
$('.elements').live('load', function () {
$(this).fancyPlugin();
})
});
События не перевязываются после аякс-вызовов или в пределах содержимого, которое они возвращают. live() прикрепляет обработчик к событию сейчас и в будущем.