最近在寫一個(gè)后臺管理項(xiàng)目的時(shí)候因?yàn)閛n事件踩了坑，所以再項(xiàng)目結(jié)束之后，想總結(jié)性的談?wù)刯query的on事件。

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

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

語法

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

實(shí)例

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

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

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

原因

on前面的元素也必須在頁面加載的時(shí)候就存在于dom里面。動態(tài)的元素或者樣式等，可以放在on的第二個(gè)參數(shù)里面。

解決方法

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

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

最后啰嗦談兩句感想：

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

轉(zhuǎn)載于:https://www.cnblogs.com/huyuzhu/p/7259293.html

總結(jié)

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

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