jquery 為動態dom繫結事件中應該注意的問題

2021-09-12 18:30:06 字數 629 閱讀 2127

動態dom指的是在js中生成的一些dom,而不是直接寫在html中的dom,對於這樣的dom,使用 jquery的普通繫結事件的方法是不奏效的,如 $(".demo").click()是無法觸發事件的。這個時候的解決方案由兩種,一種是在 dom模板中加入 onclick事件,另外一種就是使用jquery中可以為動態dom繫結事件的方法,如 on 、live 、delegate等。

使用 on 或者 delegate 都可以解決動態 dom事件繫結的問題,但是使用這兩個的時候要注意乙個問題:

比如有下面這種情況:

html:

js:現在要對 class="article_self" 的div 新增 mouseenter事件。但是這個dom是乙個由vue控制生成的動態dom,所以這裡選擇了 delegate來實現動態dom的事件繫結。

$("div").delegate(".article_self","mouseenter"。。。,需要注意的是,這裡呼叫 delegate 函式的應該是 帶有 .article_self class的元素,也就是 div ,而不是某個父級元素,如ul。該函式的作用是,查詢帶有 .article_self 的 div ,然後繫結相應的函式,而不是查詢某個父級元素下邊的帶有 .article_self 的子元素。之前一直理解錯了。

Jquery給Dom 動態繫結事件

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

jQuery為DOM動態追加事件

處理乙個列表繫結,因為是乙個展示專案,沒有使用複雜的外掛程式,直接jsrender寫了個模板,但是後面有乙個操作按鈕,去檢視資料詳情,想到了jquery使用on進行事件委託,然後就開搞 最初是這樣寫的 alert this text 當然這樣是不起作用的,因為在document reday後,btn...

jQuery動態繫結

在實際專案的時候,遇到了乙個問題,就是通過js動態生成的元素,無法觸發js事件。原始的js function 上述型別的js 在處理隨著頁面載入而載入的dom元素是沒有問題的。但是在處理頁面載入完成後,通過動態新增的方式新增上的元素是無效的,需要另外利用jquery繫結。動態新增元素的js func...