給Jquery動態新增的元素新增事件

我想很多人都會向我一樣曾經 被新元素的事件繫結困惑很久也就是

在頁面載入完成後給元素繫結了事件，但又新增加的元素上卻沒有繫結任何事件。

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());

});

給Jquery動態新增的元素新增事件

我想很多人都會向我一樣曾經 被新元素的事件繫結困惑很久也就是 在頁面載入完成後給元素繫結了事件，但又新增加的元素上卻沒有繫結任何事件。js的事件監聽跟css不一樣，css只要設定好了樣式，不論是原來就有的還是新新增的，都有一樣的表現。而事件監聽不是，你必須給每乙個元素單獨繫結事件。常見的例子是處理 ...

jquery給動態新增的元素繫結事件

jquery給動態新增的元素繫結事件的方法 jquery中繫結事件一般使用bind，或者click，但是這只能是對已經載入好的元素定義事件，那些後來新增插入的元素則需要另行繫結。在1.7版本以前使用live。但是在1.8版本以後推薦使用on。需要給jquery 1.7版以前使用live動態繫結事件 ...

jQuery給動態新增的元素繫結事件的方法

document on是把事件委託到了document上 classname on是把事件委託到了元素上面 區別 classname on 當頁面動態重新整理時，新載入的該id元素便沒有事件繫結到上面了。而第乙個還可以讓事件生效。例如 document on click titlestu funct...