Jquery給Dom 動態繫結事件

2021-07-15 19:30:58 字數 1632 閱讀 3706

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

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

js的事件監聽跟css不一樣,css只要設定好了樣式,不論是原來就有的還是新新增的,都有一樣的表現。而事件監聽不是,你必須給每乙個元素單獨繫結事件。

常見的例子是處理**的時候。每行行末有個刪除按鈕,點了這個能夠刪除這一行。

這行原來就有

刪除

這行原來就有

刪除

通常,我會這麼繫結

1.jquery(function($));

6.});

對於在domready之前就存在的刪除按鈕,一切都很完美。但如果在domready之後用js動態新增幾行,那新增的幾行中的這些按鈕都將失去任何作用。

如何解決這個問題?以下提供4種解決方案:

*************************====

0號解決方案——onclick法

如果不顧結構與行為分離的準則的話,通常,我會這麼做。

注意,此時的deltr這個function必須是全域性函式,得放jquery(function($) {})外面,放裡邊就成區域性函式了,html裡的onclick就呼叫不到了!

1.刪除

1.jquery(function($));

6.});

7.//刪除行的函式,必須要放domready函式外面

8.function deltr(delbtn);

*************************====

1號解決方案——重複繫結法

即,在domready的時候就給已有的元素繫結事件處理函式,

而後當新增加的元素的時候再次繫結。

1.刪除

1.jquery(function($);

7. //已有刪除按鈕初始化繫結刪除事件

8. $("#table3 .del").click(deltr);

9. //新增行

10. $("#add3").click(function());

16.});

*************************====

2號解決方案——事件冒泡法

利用事件冒泡的原理,我們給這個按鈕的祖先元素繫結事件處理函式。

然後通過event.target這個物件來判斷,這個事件是不是我們要找的物件觸發的。

通常可以利用一些dom屬性,比如event.target.classname、event.target.tagname等之類的來判斷。

1.刪除

1.jquery(function($);

7. });

8. //第四個**的新增按鈕事件繫結

9. $("#add4").click(function());

12.});

另外,可以使用live進行繫結,如下:

$('.clickme').live('click', function() );

:一般採用0號解決方案

如何用jQuery給動態生成的dom繫結事件

動態生成的dom元素 需要新增事件的元素 無效寫法 btnclick click function 正確寫法 使用on給dom操作的上一級或者祖先元素繫結 box on click btnclick function 分析 on events,selector data fn events 乙個或多...

jQuery給動態迴圈建立的dom新增事件

在使用jquery時,經常需要根據後端獲取的資料迴圈建立dom,而且給建立的某個元素新增事件 div on click function 用上面這種方式是繫結不了事件的,所以需要通過下面這種方式來繫結事件 document on click div function 但有時我們會迴圈建立幾個相同的d...

jquery給動態元素繫結事件

在jquery中,我們經常使用 elem bind event,function 這種方式給元素繫結事件。在大部分情況下這種寫法無疑是適用的。然而,當頁面上原本不存在某些如button,select等元素,而是後期通過動態建立的方式建立出來的控制項,這種寫法,便不再適用了。selector on e...