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

Question

我有我使用的是jQuery插件：

$.get('ajax.html', function(data){ 
    $('#container').html(data); 
}); 

我可以再次調用該插件的功能是這樣的：：

$.get('ajax.html', function(data){ 
    $('#container').html(data).find('.elements').fancyPlugin(); 
}); 

$(document).ready(function(){ 
    $('.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

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

或者，您可以使用DOM mutation events來調用fancyPlugin以查看容器中的任何更改。本機瀏覽器支持還沒有完成，但有plugins這應該照顧。

Answer 3

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

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

而且這裏有一個live demo。

Answer 4

你看過jQuery .live事件處理程序嗎？當新項目被添加到dom時，它會自動綁定，只要它符合指定的要求。

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

Answer 5

，如果你做這樣的事是什麼？

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

的事件後不Ajax調用或它們返回的內容中重新綁定。現在和將來live()附加一個處理程序事件「

Answer 6

從本質上講，你想是這樣有趣：

。

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

問題是那種邏輯不可用在頁面加載的元素不會觸發任何我知道的特定事件，他們只是繼承CSS上面的DOM節點。只是，從$.get成功函數n，觸發自定義事件。其餘的代碼可以掛鉤到該事件中，以執行可能需要的任何插件重新加載工作。你可以通過相關的選擇列表與事件，並用它來調用相應的插件（你可以保持一組selector -> plugin refresh function關係在哈希表）

Answer 7

這樣做的另一種方法是創建自己的事件：

var container=$('#container'); 
$.get('ajax.html', function(data){ 
    container.html(data); 
    $('.elements',container).trigger('added.yourns');  
}); 

container.on('added.yourns','.elements',function(){ 
    $(this).fancyPlugin(); 
}); 

然後，添加ellements時，只需使用trigger方法觸發事件！

var aDiv=$('div'); 
aDiv.appendTo(someNode); 
aDiv.trigger('added.yourns'); 

這樣做可以讓您在任何javascript文件中附加任何行爲！