如何使用JQuery將事件應用於動態加載的DOM節點？

我正在使用AHAH在文檔準備好後加載一段HTML。在我想要應用.click事件的HTML塊中有一個按鈕。加載HTML後，我無法應用該事件。回調是非常通用的，由頁面的其他部分使用，所以我不想用特定的代碼填充它。有任何想法嗎？如何使用JQuery將事件應用於動態加載的DOM節點？

來源

2010-02-19 Matt

我有另一種方法，如果這不涉及.click（）事件 - 哪個.live（）處理。只要讓我知道你是否需要這個。 – 2010-02-19 19:20:59

正如其他人都指出，要考慮使用$.live()，這將處理事件的所有預先存在的DOM元素，以及後來添加任何的道路。

$(".foo").click(function(){ 
    // I don't do anything to dynamicall-added elements 
});

這個例子將僅適用於：例如，假設您加載HTML塊點擊時有一組包含類名「富」，所有這些都應該在一個特定的方式響應鏈接包含類名「foo」的預先存在的項目。爲了應對當前和未來的元素，我們應做到以下幾點：

$(".foo").live("click", function(){ 
    // I handle both present, and future elements 
});

現在添加任何東西在任何時候將這個如果它包含的類名「foo」的處理。這適用於像你的情況，在頁面的生命週期中稍後會將大塊html插入到DOM中。

來源

2010-02-19 19:16:39 Sampson

完美！這就是訣竅！多謝你們。 – Matt 2010-02-19 20:09:53

考慮使用的.live（）方法：http://api.jquery.com/live/

來源

2010-02-19 19:05:28 zincorp

同意，如果它只是您想要管理的.click（）事件。並非所有事件都適用於.live（） – 2010-02-19 19:19:21

這就是live方法的建立。

最好的選擇是使用它，或者將event listener添加到您的包含元素中（或者甚至添加body）。 Live非常適合泡泡的活動。事件監聽器是不支持的解決方案。

來源

2010-02-19 19:05:34

我想你將不得不使用live方法來反應動態加載的內容。

live Video Demonstration

來源

2010-02-19 19:06:41 Sarfraz

正如大家所說的.live（）方法是專門爲此目的而設計的，並且您正在討論.live（）處理的點擊事件，所以繼續前進並使用它，它將是最簡單/最快的方法來完成這一點。

只是一個建議，雖然你說你有一個非常通用的回調函數，對於一個非常類似的情況我不能使用.live（）（我不得不做一些相當複雜的處理），所以我增加了靈活性通過向初始調用添加一個參數，以便調用代碼可以指定自定義回調。類似的規定：

callToAGenericService({url: '...', target: someId, callback: function myCustomCallBack (xhr) { 
    console.log('Custom callback'); 
    console.dir(xhr); 
}});

和通用服務通用回調被修改成類似的規定：

function genericServiceCallback(options,xhr) { 
    //Do the 'generic processing' of the request 

    // if calling code specified a custom callback, execute it 
    if (options.callback) { 
     options.callback(options,xhr); 
    } 
}

這顯然要複雜得多（誤差範圍處理爲主），但給出了一個理念。

來源

2010-02-19 19:47:56 SBUJOLD

如何使用JQuery將事件應用於動態加載的DOM節點？

回答

相關問題