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

Answer 3

如果使用AJAX添加這些元素，則可以使用.ajaxSuccess()方法：

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

這是一個現場演示 。

Answer 4

讓您的AJAX處理程序觸發一些自定義事件，如contentAdded ，並將fancyPlugin綁定到該事件。

或者，您可以使用DOM突變事件為容器中的任何更改調用fancyPlugin 。 原生瀏覽器支持尚未完全存在，但有些插件可以解決這個問題。

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()現在和將來都會為事件附加一個處理程序。“