摘要:我綁定的事件無效。狀況總結(jié)動態(tài)元素綁定用,靜態(tài)元素綁定兩者都可以,為了代碼的統(tǒng)一還是都用吧,切記,可以篩選元素哦
狀況之外
在之前的公司并沒有遇到這個問題,也就沒有深究。直到自己換了現(xiàn)在的公司,剛來第二天就開始寫別人寫到一半的項目,很無奈,不是原生就是jquery,由于項目急,已經(jīng)來不及切換框架重新布局,只能繼續(xù)了。狀況之中
到處都是列表,到處都是js創(chuàng)建的動態(tài)頁面,好吧,那我也繼續(xù)吧,突然,意外發(fā)生了。我綁定的click事件無效。狀況-解決唄
當(dāng)時知道的原因是動態(tài)創(chuàng)建的元素在初始化的時候還沒有,那我綁定的事件怎么可能綁定的上嘛(當(dāng)時還不知道直接綁定和通過on()綁定click的區(qū)別,也不知道on("click",param,param,callback)下面介紹的用法)
解決方法
$("#list").on("click",function(e){ var ev = e || window.event; var target = ev.target || ev.srcElement; if (target.nodeName.toLowerCase() == "a" && target.className=="reset") { msgconfirm("","是否確認(rèn)重置密碼?",function(){ ajax("/user/reset?id="+target.type,"","get","json",null,function(data){ var userObj=data.tUser; tipalert("",{ data:"密碼重置成功", username:userObj.account, password:userObj.passWord, uKey:userObj.key.replace(/,/img,"") },"../../images/ok-ico.png",function(){ window.location.reload(); }) }) }) } })
jquery+原生,我也不想的,可是我又找不到別的解決方案,解決就OK了,雖然不好看,性能也不是太好,但是我也沒有深究。
。。。。。。。。。。
狀況之后的好久好久以后那就是現(xiàn)在啦,看到別人的代碼
$("body").on("keyup","#userId,#password",function(){ if(event.keyCode==13){ loginFunc(); } });
我真的想對自己說“what are you 弄啥嘞”。
當(dāng)時真的是沒想那么多啊。在網(wǎng)上查了一下都說on("click",callback)適用于動態(tài)元素,click適用于靜態(tài)元素。但是并沒有說為什么。上面廢話一大堆,下面我說一下我的理解吧。
頁面初始化
變量
函數(shù)
on("click",callback)和click在初始化時的區(qū)別
綁定靜態(tài)元素:元素存在,預(yù)解釋OK,所以是沒啥區(qū)別啦;
綁定動態(tài)元素:元素不存在,預(yù)解釋,元素都找不到,咋預(yù)解釋啊,所以不管是on()還是click()都沒有辦法;
綁定靜態(tài)元素實現(xiàn)動態(tài)元素的事件綁定:
- 原先的HTML元素on
- 原先的HTML元素click
onclick的用法(jquery、jquery+原生)
關(guān)于用法,上面已經(jīng)介紹了,這個也是我今天才知道的,原來在綁定事件的時候就可以加入元素,而我竟然轉(zhuǎn)到了原生,一看就很菜,小白啊小白。狀況總結(jié)
動態(tài)元素綁定用on(),靜態(tài)元素綁定兩者都可以,為了代碼的統(tǒng)一還是都用on()吧,切記,on("click",param1,param2,callback)可以篩選元素哦!!!
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/98433.html
摘要:目錄第章事件介紹第章鼠標(biāo)事件第章表單事件第章鍵盤事件第章事件的綁定和解綁第章事件對象的使用第章自定義事件與事件用交互操作中,最簡單直接就是點擊操作。提供了兩個方法一個是方法用于監(jiān)聽用戶單擊操作,另一個方法是方法用于監(jiān)聽用戶雙擊操作。 目錄 第1章 事件介紹 第2章 鼠標(biāo)事件 第3章 表單事件 第4章 鍵盤事件 第5章 事件的綁定和解綁 第6章 事件對象的使用 第7章 自定義事件 cli...
摘要:目錄第章事件介紹第章鼠標(biāo)事件第章表單事件第章鍵盤事件第章事件的綁定和解綁第章事件對象的使用第章自定義事件與事件用交互操作中,最簡單直接就是點擊操作。提供了兩個方法一個是方法用于監(jiān)聽用戶單擊操作,另一個方法是方法用于監(jiān)聽用戶雙擊操作。 目錄 第1章 事件介紹 第2章 鼠標(biāo)事件 第3章 表單事件 第4章 鍵盤事件 第5章 事件的綁定和解綁 第6章 事件對象的使用 第7章 自定義事件 cli...
摘要:源碼源碼行被點擊了點擊了,即委托的事件被點擊了優(yōu)先添加委托,再添加其他即委托在上的事件數(shù)量在下標(biāo)為的位置插入委托事件解析可以看到,是優(yōu)先添加委托事件,再添加自身事件,觸發(fā)事件的時候也是按這個順序。 showImg(https://segmentfault.com/img/remote/1460000019419722); 前言:請先回顧下我之前寫的一篇文章:JavaScript之事件委...
摘要:事件的綁定和解綁的多事件綁定之前學(xué)的鼠標(biāo)事件,表單事件與鍵盤事件都有個特點,就是直接給元素綁定一個處理函數(shù),所有這類事件都是屬于快捷處理。由于瀏覽器事件冒泡特性,可以在觸發(fā)時把這個事件往上冒泡到上,因為上綁定事件響應(yīng),所以能觸發(fā)這個動作。 事件的綁定和解綁 on()的多事件綁定 之前學(xué)的鼠標(biāo)事件,表單事件與鍵盤事件都有個特點,就是直接給元素綁定一個處理函數(shù),所有這類事件都是屬于快捷處理...
閱讀 3243·2021-10-27 14:20
閱讀 2525·2021-10-08 10:05
閱讀 1625·2021-09-09 09:33
閱讀 2902·2019-08-30 13:16
閱讀 1435·2019-08-29 18:34
閱讀 1171·2019-08-29 10:58
閱讀 1228·2019-08-28 18:22
閱讀 1226·2019-08-26 13:33