事件監聽器不會被調用供以後通過腳本

我有一個原始的HTML，比方說，像這樣被添加到DOM的元素：事件監聽器不會被調用供以後通過腳本

<tr> 
    <td class = 'greatTD' id = 'great1'>I am too great to be anything less.</td> 
</tr>

然後，我通過JavaScript添加的元素，像這樣：

function AddStuff() 
{ 
    var s = '<tr><td class = "greatTD" id = "great2">I am even greater.</td></tr>'; 

    $('#foo').after(s); 
} 

function WireHandlers() 
{ 
    $('.greatTD').click(GreatTDClickHandler); 
} 

function GreatTDClickHandler() 
{ 
    // not being called for #great2 
    // how do I make it be called? 
} 

$(document).ready(function() { WireHandlers(); });

來源

2013-10-09 Water Cooler v2

的可能重複的[事件綁定上動態創建的元素？]（http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements） –

@NickTomlin謝謝。這是相關的。 –

在.greatTD元素存在之前，事件處理程序正在分配負載。因此，你需要使用一個委託處理程序，如：

function WireHandlers() { 
    $('#foo').on('click', '.greatTD', GreatTDClickHandler); 
}

這重視該事件的#foo元素，這是目前的負載，然後對其過濾以便它在.greatTD元素的點擊，纔會執行。

來源

2013-10-09 13:26:14

'.greatTD'選擇器不會在'＃foo'之後插入，因此不會找到該元素嗎？ – Danny

@Danny完全沒有，因爲它在元素被點擊時被解釋。 –

謝謝，@RoryMcCrossan。如果選擇器不是像'＃foo'這樣的基於id的選擇器，而是像'table td tr：last'這樣的僞選擇器呢？ –

以下應該工作。

$(document).on('click', '.greatTD', GreatTDClickHandler);

jQuery .on

來源

2013-10-09 13:28:10 Danny

非常感謝，丹尼。這也爲我工作。 –

事件監聽器不會被調用供以後通過腳本

回答

相關問題