狀況之外

在之前的公司并沒有遇到這個問題，也就沒有深究。直到自己換了現在的公司，剛來第二天就開始寫別人寫到一半的項目，很無奈，不是原生就是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' &amp;&amp; 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,'&lt;/br&gt;')},'../../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()都沒有辦法；

綁定靜態元素實現動態元素的事件綁定：

&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;動態添加的HTML元素click&lt;button class="deleteclick"&gt;Delete&lt;/button&gt;&lt;/li&gt;'); });$("#newon").click(function(){ $(".li").append('&lt;li&gt;動態添加的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 原生）

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

狀況總結

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

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。