2012-12-11 116 views
2

綁定到exisitng單擊事件我有jQuery的準備範圍內的類選擇觸發click事件:jQuery的動態按鈕:如何通過

$(".testBtn").click(function() 
    { 
     alert("This Works");  
    }); 

這工作得很好靜態按鈕怎麼過這並未」 t用於點擊帶有「addRowBtn」id的按鈕時添加的動態按鈕。我猜測它與事件註冊後創建按鈕有關,但仍然有新的按鈕具有'testBtn'類,所以它應該有效。 任何想法我做錯了什麼,以及如何使動態按鈕註冊到類選擇器單擊事件?

以下是整個代碼,您可以複製並粘貼到html中,單擊「添加按鈕」並嘗試單擊添加的按鈕。你會看到什麼都沒有發生。

<html> 
<head> 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script> 
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js'></script> 
<script> 
$(function() 
{  
    $(".addRowBtn").click(function() 
    { 
     $("#mainTable tr:last").after("<tr><td><button class='testBtn'>NotWorking</button></td></tr>");   
    }); 

    $(".testBtn").click(function() 
    { 
     alert("This Works");  
    }); 
}); 
</script> 
</head> 
<body> 

<table id="mainTable"> 
<button class="addRowBtn">Add button</button> 
<tr><th>Testing</th></tr> 
<tr><td><button class='testBtn'>Working</button></td></tr> 
</table> 
</body> 

</html> 

回答

9

標準答案這裏是事件委託。所有這些按鈕的父鉤click,並要求jQuery來通知您,只有當實際點擊的元素匹配選擇,這樣使用delegate

$("#mainTable").delegate(".testBtn", "click", function(e) { 
    // ... 
}); 

...或者像這樣的jQuery 1.7+使用在Hyper-超載on

$("#mainTable").on("click", ".testBtn", function(e) { 
    // ... 
}); 

注意,在參數的順序不同。我更喜歡delegate的明確性。

Live Example | Source

在這兩種情況下,jQuery將鉤click#mainTable,但是當點擊發生時,只調用處理,如果匹配.testBtn一個元素是被點擊的元素和#mainTable之間的血統。它會調用處理程序,就好像它已被掛鉤到.testBtn元素。

請注意,如果您願意,您可以對.addRowBtn執行相同操作。

+1

這樣一個偉大的答案事件處理程序適用於所有的情況下,不能要求更多了。非常感謝 ! –

+0

@omerbach:嗨,謝謝!很高興幫助! –