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

2021-06-08 21:53:30 字數 1710 閱讀 3481

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

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

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...