js的事件監聽跟css不一樣，css只要設定好了樣式，不論是原來就有的還是新新增的，都有一樣的表現。而事件監聽不是，你必須給每一個元素單獨繫結事件。 常見的例子是處理表格的時候。每行行末有個刪除按鈕，點了這個能夠刪除這一行。
| 這行原來就有 |
|
| 這行原來就有 |
|
複製程式碼
通常，我會這麼繫結jQuery(function($){ //已有刪除按鈕初始化繫結刪除事件 $(".del").click(function() { $(this).parents("tr").remove(); });}); 對於在domready之前就存在的刪除按鈕，一切都很完美。但如果在domready之後用js動態新增幾行，那新增的幾行中的這些按鈕都將失去任何作用。 如何解決這個問題？以下提供4種解決方案：0號解決方案——onclick法如果不顧結構與行為分離的準則的話，通常，我會這麼做。注意，此時的deltr這個function必須是全域性函式，得放jQuery(function($) {})外面，放裡邊就成區域性函數了，html裡的onclick就呼叫不到了！
1.
1.jQuery(function($){
2. //新增行
3. $("#add2").click(function(){
4. $("#table2>tbody").append('新增行')
5. });
6.});
7.//刪除行的函式，必須要放domready函式外面
8.function deltr(delbtn){
9. $(delbtn).parents("tr").remove();
10.};
複製程式碼
1號解決方案——重複繫結法即，在domready的時候就給已有的元素繫結事件處理函式，而後當新增加的元素的時候再次繫結。
1.
1.jQuery(function($){
2. //定義刪除按鈕事件繫結
3. //寫裡邊，防止汙染全域性名稱空間
4. function deltr(){
5. $(this).parents("tr").remove();
6. };
7. //已有刪除按鈕初始化繫結刪除事件
8. $("#table3 .del").click(deltr);
9. //新增行
10. $("#add3").click(function(){
11. $('新增行')
12. //在這裡給刪除按鈕再次繫結事件。
13. .find(".del").click(deltr).end()
14. .appendTo($("#table3>tbody"));
15. });
16.});
2號解決方案——事件冒泡法利用事件冒泡的原理，我們給這個按鈕的祖先元素繫結事件處理函式。然後通過event.target這個物件來判斷，這個事件是不是我們要找的物件觸發的。通常可以利用一些DOM屬性，比如event.target.className、event.target.tagName等之類的來判斷。
1.
1.jQuery(function($){
2. //第四個表格的刪除按鈕事件繫結
3. $("#table4").click(function(e) {
4. if (e.target.className=="del"){
5. $(e.target).parents("tr").remove();
6. };
7. });
8. //第四個表格的新增按鈕事件繫結
9. $("#add4").click(function(){
10. $("#table4>tbody").append('新增行')
11. });
12.});
3號解決方案——複製事件法上面幾種方案可以說即便你沒有用到jQuery庫，你也能相對比較容易的實現。但這種方案相對依賴jQuery的程度更高。而且必須要求jQuery 1.2版以上。低版本jQuery需要外掛。上面兩個方案都是對刪除函式動了很多腦筋，換了多種觸發、繫結的方式。這個方案不同，可以與平時純靜態的元素一樣在domready的時候繫結。但在我們新增新行的時候我們改動一下，不再想上面那樣拼接字串來新增新行了。這回我們嘗試使用複製DOM元素的方式。並且複製的時候連同繫結的事件一起復制，複製完之後再用find之類的修改內部的元素。同時，就像這個例子，如果你會把所有元素都刪除光，那template這個模板是必須的，如果不會刪光，那就未必需要用template了。為了防止被誤刪，此處我把template設了隱藏。我使用了jQuery中特有的clone(true)
1..template{display:none;}
1.
2. 這裡是模板
3.
4.
5.
6. 這行原來就有
7.
8.
9.
10. 這行原來就有
11.
12.
1.jQuery(function($){
2. //第五個表格的刪除按鈕事件繫結
3. $("#table5 .del").click(function() {
4. $(this).parents("tr").remove();
5. });
6. //第五個表格的新增按鈕事件繫結
7. $("#add5").click(function(){
8. $("#table5>tbody>tr:eq(0)")
9. //連同事件一起復制
10. .clone(true)
11. //去除模板標記
12. .removeClass("template")
13. //修改內部元素
14. .find("td:eq(0)")
15. .text("新增行")
16. .end()
17. //插入表格
18. .appendTo($("#table5>tbody"))
19. });
20.});