2012-08-09 46 views
7

我試圖運行一個正在動態加載的元素(.this_button)的函數。即時通訊使用下面的代碼:onLoad新元素,代表/ on?

$(function(){ 
    $("body").on("load", ".this_button", function() { 
     console.log("its been loaded"); 
    }); 
}); 

我試過delegate,但它說贊成on其被棄用。在文件已經加載10分鐘後,可能會推送一些內容。它如何持續檢查一個元素.this_button是否已經進入正文?

任何人都知道爲什麼這不工作?

+0

它在哪裏動態添加?你不能只在這裏添加這個功能嗎? – 2012-08-09 14:16:15

+0

@rocky不,這個元素不能包含腳本。它是從數據庫加載的,它會使事情複雜化 – 2012-08-09 14:17:12

+0

是}}:真的是你最後的結果?我認爲應該是'});' – 2012-08-09 14:18:00

回答

9

documentation

「在所有的瀏覽器,所述負載,滾動和誤差事件(例如,一個元件上)不冒泡[...]這樣的事件不支持與授權使用。 ,但是當事件處理程序直接附加到生成事件的元素時,可以使用它們。「

+3

什麼觸發按鈕被添加到頁面?你能把它附在同一件事上嗎? – 2012-08-09 14:33:34

11

on方法將處理當前選定元素在第一次執行時的事件或將引發與特定選擇器匹配的特定事件的任何未來元素。由於添加到頁面的元素不會自動引發load或某些其他類型的事件,因此您的代碼將永遠不會爲您新添加的元素執行。

您有兩種選擇。首先是在插入新元素時觸發自定義事件。例如,

$.get("/newElemnet", function(newElement) { 
    $('#placeToInsertElement').append(newElement); 
    $(newElement).trigger('newElementAdded'); 
}); 

然後你原來的功能會聽爲自定義事件:

$(function(){ 
    $("body").on("newElementAdded", ".this_button", function() { 
     console.log("its been loaded"); 
    }); 
}); 

第二個選擇就是不斷輪詢在本question描述的新元素。