jQuery為DOM動(dòng)態(tài)追加事件的方法
處理一個(gè)列表綁定,因?yàn)槭且粋€(gè)展示項(xiàng)目,沒有使用復(fù)雜的插件,直接jsrender寫了個(gè)模板,但是后面有一個(gè)操作按鈕,去查看數(shù)據(jù)詳情,想到了jquery使用on進(jìn)行事件委托,然后就開搞
最初是這樣寫的:
$(".btn-open").on("click", function () { alert($(this).text()); })
當(dāng)然這樣是不起作用的,因?yàn)樵赿ocument reday后,.btn-open 這個(gè)元素根本還不存在呢,列表沒綁定,事件當(dāng)然也幫不上的!
然后是這樣的:
$(".table").on("click", ".btn-open", function () { alert($(this).text()); })
代碼可以看得明白,找到.table 元素,給.btn-open 追加 click事件。一般來說這樣就可以了。但是依然不行,我勒個(gè)去,我開始懷疑自己的記憶了。然后去找了下文檔。
文檔說:
事件處理只能綁定在當(dāng)前被選中的元素上;而且,在您的代碼調(diào)用.on()的時(shí)候,他們必須在頁面文檔中已經(jīng)存在。
好吧,在document ready時(shí),.table確實(shí)不存在,所以 還要繼續(xù)改
$(document).on("click", ".btn-open", function () { alert($(this).text()); })
終于可以工作了。
總結(jié):
1.jQuery委托事件與直接綁定事件的區(qū)別:
$(“X”).on(“click”,function(){})
$(“X”).on(“click”,”選擇X的子元素”,function(){})
2.事件處理只能綁定到當(dāng)前存在的元素身上,也就是第一個(gè)選擇器中的內(nèi)容必須當(dāng)前存在(這也是為什么第二段代碼不起作用的原因,因?yàn)?table不存在),所以保險(xiǎn)起見,可以直接綁定委托事件到document上。
以前一直沒有仔細(xì)的閱讀文檔,對這一塊模棱兩可,今天弄清楚并記錄下來。
以上這篇jQuery為DOM動(dòng)態(tài)追加事件的方法就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- jquery 元素控制(追加元素/追加內(nèi)容)介紹及應(yīng)用
- jQuery 追加元素的方法如append、prepend、before
- jquery?追加元素append、prepend、before、after用法與區(qū)別分析
- Jquery元素追加和刪除的實(shí)現(xiàn)方法
- jQuery動(dòng)態(tài)創(chuàng)建元素以及追加節(jié)點(diǎn)的實(shí)現(xiàn)方法
- jquery 操作日期、星期、元素的追加的實(shí)現(xiàn)代碼
- JQuery實(shí)現(xiàn)樣式設(shè)置、追加、移除與切換的方法
- jquery 追加tr和刪除tr示例代碼
- 利用jquery如何從json中讀取數(shù)據(jù)追加到html中
- jQuery實(shí)現(xiàn)合并/追加數(shù)組并去除重復(fù)項(xiàng)的方法
- js和jquery對dom節(jié)點(diǎn)的操作(創(chuàng)建/追加)
- jQuery操作元素追加內(nèi)容示例
相關(guān)文章
jQuery使用正則表達(dá)式限制文本框只能輸入數(shù)字
本文主要介紹jQuery中使用正則表達(dá)式限制文本框只能輸入數(shù)字的功能,希望能幫到大家,有需要的朋友可以參考一下。2016-06-06jQuery實(shí)現(xiàn)驗(yàn)證表單密碼一致性及正則表達(dá)式驗(yàn)證郵箱、手機(jī)號的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)驗(yàn)證表單密碼一致性及正則表達(dá)式驗(yàn)證郵箱、手機(jī)號的方法,涉及jQuery表單元素獲取及正則驗(yàn)證相關(guān)操作技巧,需要的朋友可以參考下2017-12-12jQuery實(shí)現(xiàn)的一個(gè)tab切換效果內(nèi)部還嵌有切換
這篇文章主要介紹了jQuery實(shí)現(xiàn)的一個(gè)tab切換效果,它的特色是內(nèi)部還嵌有切換,需要的朋友可以參考下2014-08-08基于jQuery的輸入框無值自動(dòng)顯示指定數(shù)據(jù)的實(shí)現(xiàn)代碼
在自己的網(wǎng)頁中,常常要實(shí)現(xiàn)指定樣式的輸入框,當(dāng)輸入框中沒有輸入或只輸入空格等無效信息時(shí),自動(dòng)顯示指定的文本,以提醒用戶應(yīng)該如何操作,下面是具體實(shí)現(xiàn)方法,僅供參考。2011-01-01