jQuery:如何在尚未添加到DOM的元素上调用jQuery插件函数？

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文件中附加任何行为!