狀況之外

在之前的公司并沒有遇到這個問題，也就沒有深究。直到自己換了現(xiàn)在的公司，剛來第二天就開始寫別人寫到一半的項(xiàng)目，很無奈，不是原生就是jquery，由于項(xiàng)目急，已經(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)下面介紹的用法）

<p>解決方法

$("#list").on('click',function(e){var ev = e || window.event;var target = ev.target || ev.srcElement;if (target.nodeName.toLowerCase() == 'a' &amp;&amp; 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,'&lt;/br&gt;')},'../../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)元素。但是并沒有說為什么。上面廢話一大堆，下面我說一下我的理解吧。

• 先說一下js中的預(yù)解釋

頁面初始化

變量

函數(shù)

• 看完預(yù)解釋就說一下今天的主題吧

on('click',callback)和click在初始化時的區(qū)別

綁定靜態(tài)元素：元素存在，預(yù)解釋OK，所以是沒啥區(qū)別啦；

綁定動態(tài)元素：元素不存在，預(yù)解釋，元素都找不到，咋預(yù)解釋啊，所以不管是on()還是click()都沒有辦法；

綁定靜態(tài)元素實(shí)現(xiàn)動態(tài)元素的事件綁定：

&lt;html&gt;&lt;div class="test"&gt;&lt;button class="new" id="newon"&gt;NewOn&lt;/button&gt; &lt;button class="new" id="newclick"&gt;NewClick&lt;/button&gt;&lt;ul class="li"&gt; &lt;li&gt;原先的HTML元素on&lt;button class="deleteon"&gt;Delete&lt;/button&gt;&lt;/li&gt; &lt;li&gt;原先的HTML元素click&lt;button class="deleteclick"&gt;Delete&lt;/button&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt;&lt;script&gt;$("#newclick").click(function(){ $(".li").append('&lt;li&gt;動態(tài)添加的HTML元素click&lt;button class="deleteclick"&gt;Delete&lt;/button&gt;&lt;/li&gt;'); });$("#newon").click(function(){ $(".li").append('&lt;li&gt;動態(tài)添加的HTML元素on&lt;button class="deleteon"&gt;Delete&lt;/button&gt;&lt;/li&gt;'); });$(".delete").click(function(){ $(this).parent().remove(); }); //刪除選中元素$(".li").on('click', ".deleteon", function(){$(this).parent().remove(); })//看看，刪除不了吧$(".deleteclick").click(function(){ $(this).parent().remove(); });&lt;/script&gt;&lt;/html&gt;

onclick的用法（jquery、jquery 原生）

關(guān)于用法，上面已經(jīng)介紹了，這個也是我今天才知道的，原來在綁定事件的時候就可以加入元素，而我竟然轉(zhuǎn)到了原生，一看就很菜，小白啊小白。

狀況總結(jié)

動態(tài)元素綁定用on()，靜態(tài)元素綁定兩者都可以，為了代碼的統(tǒng)一還是都用on()吧，切記，on('click',param1,param2,callback)可以篩選元素哦！！！

原文地址：https://segmentfault.com/a/1190000016713781

更多專業(yè)前端知識，請上 【猿2048】www.mk2048.com

總結(jié)

以上是生活随笔為你收集整理的jQuery的on绑定click和直接绑定click区别的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。