本篇文章帶給大家的內容是關於jQuery中onClick和click有何不同? jQuery中onClick和click的差別介紹,有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。
狀況之外
在之前的公司並沒有遇到這個問題,也就沒有深究。直到自己換了現在的公司,剛來第二天就開始寫別人寫到一半的項目,很無奈,不是原生就是jquery,由於項目急,已經來不及切換框架重新佈局,只能繼續了。
狀況之中
到處都是列表,到處都是js創建的動態頁面,好吧,那我也繼續吧,突然,意外發生了。 ==我綁定的click事件無效==。
狀況-解決唄
當時知道的原因是動態建立的元素在初始化的時候還沒有,那我綁定的事件怎麼可能綁定的上嘛(==當時還不知道onclick和click差別,也不知道onclick下面介紹的用法==)
解決方法
$("#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 弄啥嘞” 。
當時真的是沒想那麼多。在網路上查了一下都說onclick適用於動態元素,click適用於靜態元素。但是並沒有說為什麼。上面廢話一大堆,下面我說一下我的理解吧。
先說一下js中的預解釋
頁面初始化
變數-->|初始化|初始化變數但是不會賦值
初始化變數但是不會賦值-->|初始化完成|變數賦值
函數-->|初始化|在當前作用域形成一個新的空間-作為存儲當前函數
在當前作用域形成一個新的空間-作為存儲當前函數-->|初始化完成|執行函數
看完預解釋就說一下今天的主題吧
<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>
以上是jQuery中onClick和click有何不同? jQuery中onClick和click的區別介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!