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 发生在另一个不需要知道 fancyPlugin() 的 jQuery 插件中。

如何将此插件应用于所有当前和未来的元素？

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();
});

这是live demo。

Answer 4

让您的 AJAX 处理程序触发一些自定义事件，例如 contentAdded，并将 fancyPlugin 绑定到该事件。

或者，您可以使用DOM mutation events 调用fancyPlugin 以对容器进行任何更改。本地浏览器支持还没有完全到位，但有 plugins 应该会处理好这个问题。

Answer 5

有趣。本质上，您会喜欢这样的东西：

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

问题是这种逻辑不可用。页面上加载的元素不会触发我知道的任何特定事件，它们只是从它们上方的 DOM 节点继承 CSS。我要做的只是从$.get 成功函数中触发一个自定义事件。您的其余代码可以挂钩到该事件以执行任何可能需要的插件重新加载工作。您可以将相关选择器列表与事件一起传递，并使用它来调用适当的插件（您可以在哈希表中保留一组 selector -> plugin refresh function 关系）

Answer 6

您看过 jQuery .live 事件处理程序吗？如果满足指定要求，则在将新项目添加到 dom 时自动绑定。

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

Answer 7

如果你做了这样的事情呢？

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

事件不会在 ajax 调用后或在它们返回的内容中重新绑定。 live() 将处理程序附加到现在和将来的事件。"