jQuery的on繫結click和直接繫結click區別
阿新 • • 發佈:2018-11-05
狀況之外
在之前的公司並沒有遇到這個問題,也就沒有深究。直到自己換了現在的公司,剛來第二天就開始寫別人寫到一半的專案,很無奈,不是原生就是jquery,由於專案急,已經來不及切換框架重新佈局,只能繼續了。
狀況之中
到處都是列表,到處都是js建立的動態頁面,好吧,那我也繼續吧,突然,意外發生了。我繫結的click事件無效。
狀況-解決唄
當時知道的原因是動態建立的元素在初始化的時候還沒有,那我繫結的事件怎麼可能繫結的上嘛(當時還不知道直接繫結和通過on()繫結click的區別,也不知道on('click',param,param,callback)下面介紹的用法)
<p>解決方法
$("#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('','是否確認重置密碼?',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,'</br>') },'../../images/ok-ico.png',function(){ window.location.reload(); }) }) }) } })
jquery+原生,我也不想的,可是我又找不到別的解決方案,解決就OK了,雖然不好看,效能也不是太好,但是我也沒有深究。
。。。。。。。。。。
狀況之後的好久好久以後
那就是現在啦,看到別人的程式碼
$("body").on("keyup","#userId,#password",function(){
if(event.keyCode==13){
loginFunc();
}
});
我真的想對自己說“what are you 弄啥嘞”。
當時真的是沒想那麼多啊。在網上查了一下都說on('click',callback)適用於動態元素,click適用於靜態元素。但是並沒有說為什麼。上面廢話一大堆,下面我說一下我的理解吧。
先說一下js中的預解釋
頁面初始化
變數
函式
看完預解釋就說一下今天的主題吧
-
on('click',callback)和click在初始化時的區別
- 繫結靜態元素:元素存在,預解釋OK,所以是沒啥區別啦;
- 繫結動態元素:元素不存在,預解釋,元素都找不到,咋預解釋啊,所以不管是on()還是click()都沒有辦法;
- 繫結靜態元素實現動態元素的事件繫結:
<html>
<div class="test">
<button class="new" id="newon">NewOn</button>
<button class="new" id="newclick">NewClick</button>
<ul class="li">
<li>原先的HTML元素on<button class="deleteon">Delete</button></li>
<li>原先的HTML元素click<button class="deleteclick">Delete</button></li>
</ul>
</div>
<script>
$("#newclick").click(function(){
$(".li").append('<li>動態新增的HTML元素click<button class="deleteclick">Delete</button></li>');
});
$("#newon").click(function(){
$(".li").append('<li>動態新增的HTML元素on<button class="deleteon">Delete</button></li>');
});
$(".delete").click(function(){
$(this).parent().remove();
});
//刪除選中元素
$(".li").on('click', ".deleteon", function(){
$(this).parent().remove();
})
//看看,刪除不了吧
$(".deleteclick").click(function(){
$(this).parent().remove();
});
</script>
</html>
- onclick的用法(jquery、jquery+原生)
關於用法,上面已經介紹了,這個也是我今天才知道的,原來在繫結事件的時候就可以加入元素,而我竟然轉到了原生,一看就很菜,小白啊小白。
狀況總結
動態元素繫結用on(),靜態元素繫結兩者都可以,為了程式碼的統一還是都用on()吧,切記,on('click',param1,param2,callback)可以篩選元素哦!!!