最近在寫一個后臺管理項目的時候因為on事件踩了坑，所以再項目結束之后，想總結性的談談jquery的on事件。

on事件是在jQuery1.1之后bind()、live()和delegate()方法新的替代品。

使用 on() 方法添加的事件處理程序適用于當前及未來的元素（比如由腳本創建的新元素）。

語法

$(selector).on(event,childSelector,data,function,map)

實例

$(document).ready(function(){$("#div1").on("click",function(){$(this).css("background-color","pink");});}

看起來這個方法是很好用的，對于自己在js里動態添加的元素用這個方法幾乎都是沒什么問題的。但我們有時寫網頁，會運用到別人已經寫好的一些插件，插件的代碼可能很繁瑣，所以我們要在它上面動手腳一般會想到通過獲取它的id或者class去做一些事情。這個時候由于你不了解它代碼內部的結構，你向上面那樣去運用on事件就不生效了。

這個問題困擾了我一天，想了很多辦法，把所有的事件綁定方法都使用了一遍，甚至試圖去解讀插件的源代碼。結果第二天突然想到去查一查on事件不執行的原因，終于找到了答案。

原因

on前面的元素也必須在頁面加載的時候就存在于dom里面。動態的元素或者樣式等，可以放在on的第二個參數里面。

解決方法

$( document ).on( "click", ".del_opter", function() {console.dir(stat);});

網上沒有對為什么這樣寫給出解釋，但是我個人覺得應該是先去加載一遍dom在使用on事件的意思吧。

最后啰嗦談兩句感想：

做這個項目中遇到的幾個問題，有時幾天都沒有得到解決，有時真的感到絕望了，晚上睡不著，夢里都是怎樣都清不掉的bug。但第二天醒來，突然思維一現，卻又看見了一現生機。或許這就是日思夜想的效果吧，你的努力是看得見效果的，不要放棄，下一秒你就可以享受到那豁然開朗的喜悅了。

轉載于:https://www.cnblogs.com/huyuzhu/p/7259293.html

總結

以上是生活随笔為你收集整理的jquery on()事件的全部內容，希望文章能夠幫你解決所遇到的問題。

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