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

我有一个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

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

或者，您可以使用DOM突变事件为容器中的任何更改调用fancyPlugin 。 本机浏览器支持还没有完成，但是有些插件可以解决这个问题。

Answer 5

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

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

问题是那种逻辑不可用。 在页面上加载的元素不会触发我所知道的任何特定事件，它们只是从它们上面的DOM节点inheritanceCSS。 我要做的只是从$.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()现在和将来都会为事件附加一个处理程序。“