jQuery為DOM動態追加事件

2022-01-15 06:20:54 字數 901 閱讀 2567

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

最初是這樣寫的:

alert($(this).text());
})

當然這樣是不起作用的,因為在document reday後,.btn-open 這個元素根本還不存在呢,列表沒繫結,事件當然也幫不上的!

然後是這樣的:

alert($(this).text());
})

**可以看得明白,找到.table 元素,給.btn-open 追加 click事件。一般來說這樣就可以了。但是依然不行,我勒個去,我開始懷疑自己的記憶了。然後去找了下文件。

文件說:

事件處理只能繫結在當前被選中的元素上;而且,在您的**呼叫.on()的時候,他們必須在頁面文件中已經存在。

好吧,在document ready時,.table確實不存在,所以 還要繼續改

alert($(this).text());
})

終於可以工作了。

總結:1.jquery委託事件與直接繫結事件的區別:

$(「x」).on(「click」,function(){})

$(「x」).on(「click」,」選擇x的子元素」,function(){})

2.事件處理只能繫結到當前存在的元素身上,也就是第乙個選擇器中的內容必須當前存在(這也是為什麼第二段**不起作用的原因,因為.table不存在),所以保險起見,可以直接繫結委託事件到document上。

以前一直沒有仔細的閱讀文件,對這一塊模稜兩可,今天弄清楚並記錄下來。

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

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

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

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

Jquery給Dom 動態繫結事件

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