我想很多人都會向我一樣曾經 被新元素的事件繫結困惑很久也就是
在頁面載入完成後給元素繫結了事件，但又新增加的元素上卻沒有繫結任何事件。
js的事件監聽跟css不一樣，css只要設定好了樣式，不論是原來就有的還是新新增的，都有一樣的表現。而事件監聽不是，你必須給每乙個元素單獨繫結事件。
常見的例子是處理**的時候。每行行末有個刪除按鈕，點了這個能夠刪除這一行。
<
table
>
<
tbody
>
<
tr>
<
td>
這行原來就有
td>
<
td><
button
class="
del"
>
刪除button
>
td>
tr>
<
tr>
<
td>
這行原來就有
td>
<
td><
button
class="
del"
>
刪除button
>
td>
tr>
tbody
>
table
>
通常，我會這麼繫結
jquery
(function($
));})
; 對於在domready之前就存在的刪除按鈕，一切都很完美。但如果在domready之後用js動態新增幾行，那新增的幾行中的這些按鈕都將失去任何作用。
如何解決這個問題？以下提供4種解決方案：
*************************====
0號解決方案——onclick法
如果不顧結構與行為分離的準則的話，通常，我會這麼做。
注意，此時的deltr這個function必須是全域性函式，得放jquery(function($) {})外面，放裡邊就成區域性函式了，html裡的onclick就呼叫不到了！
<
td><
button
onclick="
deltr(this)
">
刪除button
>
td>
jquery
(function($
));})
;//刪除行的函式，必須要放domready函式外面
function
deltr
(delbtn);
*************************====
1號解決方案——重複繫結法
即，在domready的時候就給已有的元素繫結事件處理函式，
而後當新增加的元素的時候再次繫結。
<
td><
button
class="
del"
>
刪除button
>
td>
jquery
(function($
);//已有刪除按鈕初始化繫結刪除事件$(
"#table3 .del")
.click
(deltr);
//新增行$(
"#add3")
.click
(function
());});
*************************====
2號解決方案——事件冒泡法
利用事件冒泡的原理，我們給這個按鈕的祖先元素繫結事件處理函式。
然後通過event.target這個物件來判斷，這個事件是不是我們要找的物件觸發的。
通常可以利用一些dom屬性，比如event.target.classname、event.target.tagname等之類的來判斷。
<
td><
button
class="
del"
>
刪除button
>
td>
jquery
(function($
);});
//第四個**的新增按鈕事件繫結$(
"#add4")
.click
(function
());});
jquery 新建的元素事件繫結問題
js的事件監聽跟css不一樣，css只要設定好了樣式，不論是原來就有的還是新新增的，都有一樣的表現。而事件監聽不是，你必須給每乙個元素單獨繫結事件。常見的例子是處理 的時候。每行行末有個刪除按鈕，點了這個能夠刪除這一行。table tbody tr td 這行原來就有 td button class...
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...