js的事件監聽跟css不一樣，css只要設定好了樣式，不論是原來就有的還是新新增的，都有一樣的表現。而事件監聽不是，你必須給每乙個元素單獨繫結事件。
常見的例子是處理**的時候。每行行末有個刪除按鈕，點了這個能夠刪除這一行。
<
table
>
<
tbody
>
<
tr>
<
td>
這行原來就有
<
td><
button
class="
del"
>
刪除<
tr>
<
td>
這行原來就有
<
td><
button
class="
del"
>
刪除通常，我會這麼繫結
jquery(function($));
});
對於在domready之前就存在的刪除按鈕，一切都很完美。但如果在domready之後用js動態新增幾行，那新增的幾行中的這些按鈕都將失去任何作用。
如何解決這個問題？以下提供4種解決方案：
*************************====
0號解決方案——onclick法
如果不顧結構與行為分離的準則的話，通常，我會這麼做。
注意，此時的deltr這個function必須是全域性函式，得放jquery(function($) {})外面，放裡邊就成區域性函式了，html裡的onclick就呼叫不到了！
刪除
jquery(function($));
});//刪除行的函式，必須要放domready函式外面
function deltr(delbtn);
*************************====
1號解決方案——重複繫結法
即，在domready的時候就給已有的元素繫結事件處理函式，
而後當新增加的元素的時候再次繫結。
刪除
jquery(function($);
//已有刪除按鈕初始化繫結刪除事件
$("#table3 .del").click(deltr);
//新增行
$("#add3").click(function());
});
*************************====
2號解決方案——事件冒泡法
利用事件冒泡的原理，我們給這個按鈕的祖先元素繫結事件處理函式。
然後通過event.target這個物件來判斷，這個事件是不是我們要找的物件觸發的。
通常可以利用一些dom屬性，比如event.target.classname、event.target.tagname等之類的來判斷。
刪除
jquery(function($);
});//第四個**的新增按鈕事件繫結
$("#add4").click(function());
});3號解決方案——複製事件法
上面幾種方案可以說即便你沒有用到jquery庫，你也能相對比較容易的實現。但這種方案相對依賴jquery的程度更高。而且必須要求jquery 1.2版以上。低版本jquery需要外掛程式。
上面兩個方案都是對刪除函式動了很多腦筋，換了多種觸發、繫結的方式。這個方案不同，可以與平時純靜態的元素一樣在domready的時候繫結。但在我們新增新行的時候我們改動一下，不再想上面那樣拼接字串來新增新行了。這回我們嘗試使用複製dom元素的方式。並且複製的時候連同繫結的事件一起複製，複製完之後再用find之類的修改內部的元素。
同時，就像這個例子，如果你會把所有元素都刪除光，那template這個模板是必須的，如果不會刪光，那就未必需要用template了。為了防止被誤刪，此處我把template設了隱藏。
我使用了jquery中特有的clone(true)
.template
這裡是模板
刪除這行原來就有
刪除這行原來就有刪除
jquery(function($));
//第五個**的新增按鈕事件繫結
$("#add5").click(function());
});
*************************====
總評：上面4種方案，各有優劣。
0號方案，結構與行為完全沒有分離，而且汙染全域性命名空間。最不推薦。所以我都不把它當作乙個方案來看。但對於js初學者，可以用來專案救急。
1號方案，中規中矩，沒啥好也沒啥不好
2號方案，這種方法充分的發揮了js事件冒泡的優勢。而且效率最高。但同時由於這種方案無視了jquery強大的選擇器，所以如果涉及的元素屬性要求過多就會比較麻煩了。你會徘徊在眾多if的條件的是非關係之中。後來我想起來，可以用jquery中的$(event.target).is(selector)來作為條件。這樣可以極大提公升開發效率，但略微降低執行效率。
3號方案，這是我認為最能體現結構與行為分離的思想的一種方案。但缺點也很明顯，對於jquery依賴性過於高了，要不就自己寫乙個複製連同事件一起複製的函式，但這也顯然對於初學者來說異常困難。但從未來的趨勢的角度來看，還是很推薦使用這種方案的。
具體選用哪乙個方案，沒有定數。具體看你的專案以及你js還有結構與行為分離的思想的掌握程度。最適合的才是最好的。
*************************====
附加：把3號方案改造成完美的結構行為分離的樣式。
首先，帶有template的是模板元素。他是一切複製的源泉，為了防止被誤刪，所以設為不可見。如果不會刪除光，那麼這個模板元素也是可選的。因為你可以複製任何乙個已經存在的用於迴圈元素。
其次，給每個重複的元素加上乙個repeat，方便用於刪除按鈕找到這一級元素。這個是可選的，有時候並不需要。
最後是給每乙個要修改的元素加上乙個類，便於用find找到。比如我這裡就家了content類，新增加的可以修改裡邊的值。
這樣乙個完美的結構與行為分離的案例就完成了。
這裡是模板
刪除這行原來就有
刪除這行原來就有刪除
新增 jquery(function($));
//第六個**的新增按鈕事件繫結
$("#add6").click(function());
});
同樣，這段js也適用於如下的html結構
jquery 新建的元素事件繫結問題 上
我想很多人都會向我一樣曾經 被新元素的事件繫結困惑很久也就是 在頁面載入完成後給元素繫結了事件，但又新增加的元素上卻沒有繫結任何事件。js的事件監聽跟css不一樣，css只要設定好了樣式，不論是原來就有的還是新新增的，都有一樣的表現。而事件監聽不是，你必須給每乙個元素單獨繫結事件。常見的例子是處理 ...
jquery 動態元素事件繫結 on
jquery on 方法是官方推薦的繫結事件的乙個方法。selector on event,childselector,data,function,map 由此擴充套件開來的幾個以前常見的方法有.bind p bind click function p on click function deleg...
jquery給動態元素繫結事件
在jquery中，我們經常使用 elem bind event,function 這種方式給元素繫結事件。在大部分情況下這種寫法無疑是適用的。然而，當頁面上原本不存在某些如button,select等元素，而是後期通過動態建立的方式建立出來的控制項，這種寫法，便不再適用了。selector on e...