jquery.on()超級(jí)方法
成都創(chuàng)新互聯(lián)是一家專業(yè)提供澄海企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、H5響應(yīng)式網(wǎng)站、小程序制作等業(yè)務(wù)。10年已為澄海眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)絡(luò)公司優(yōu)惠進(jìn)行中。
歸納
在jquery的on方法中實(shí)現(xiàn)事件委托就更簡(jiǎn)單了,on方法可以接受三個(gè)參數(shù):
第一個(gè)參數(shù)是事件名,可以只綁定一個(gè)事件,如on('click'),也可以綁定多個(gè)事件,如on('click dbclick mouseover')等
第二個(gè)參數(shù)是可選參數(shù),接受一個(gè)selector,當(dāng)事件觸發(fā)元素符合selector時(shí),會(huì)調(diào)用事件處理函數(shù)
注:此處用到 li:even 選擇器,后面有注解
第三個(gè)參數(shù)是自定義事件處理的回調(diào)函數(shù)。
1.jQuery :even 選擇器
選取每個(gè)帶有偶數(shù) index 值的元素(比如 2、4、6)
index 值從 0 開始,所有第一個(gè)元素是偶數(shù) (0)
2.jQuery :odd 選擇器
選取每個(gè)帶有奇數(shù) index 值的元素(比如 1、3、5)
有on 方法的 你可以先試下 用下click 方法 如果 click 也不行 估計(jì)是 jquery 循序 搞錯(cuò) 或者是沒(méi)有 讀取到 jquery 文件
你這個(gè)沒(méi)問(wèn)題啊,我執(zhí)行過(guò)的,除了你打開和關(guān)閉沒(méi)有包引號(hào),其他都沒(méi)問(wèn)題
events:一個(gè)或多個(gè)用空格分隔的事件類型和可選的命名空間,如"click"或"keydown.myPlugin" 。
selector:一個(gè)選擇器字符串用于過(guò)濾器的觸發(fā)事件的選擇器元素的后代。如果選擇器為null或省略,當(dāng)它到達(dá)選定的元素,事件總是觸發(fā)。
data:當(dāng)一個(gè)事件被觸發(fā)時(shí)要傳遞event.data給事件處理函數(shù)。
fn:該事件被觸發(fā)時(shí)執(zhí)行的函數(shù)。 false 值也可以做一個(gè)函數(shù)的簡(jiǎn)寫,返回false。
當(dāng)?shù)诙€(gè)參數(shù)'selector'為null時(shí),on()和bind()其實(shí)在用法上基本上沒(méi)有任何區(qū)別了,所以我們可以認(rèn)為on()只是比bind()多了一個(gè)可選的'selector'參數(shù),所以on()可以非常方便的替換掉bind()
在 1.4之前相信大家非常喜歡使用live(),因?yàn)樗梢园咽录壎ǖ疆?dāng)前以及以后添加的元素上面,當(dāng)然在1.4之后delegate()也可以做類似的事情了。live()的原理很簡(jiǎn)單,它是通過(guò)document進(jìn)行事件委派的,因此我們也可以使用on()通過(guò)將事件綁定到document來(lái)達(dá)到 live()一樣的效果。
1、live()寫法
2、on()寫法
這里的關(guān)鍵就是第二個(gè)參數(shù)'selector'在起作用了。它是一個(gè)過(guò)濾器的作用,只有被選中元素的后代元素才會(huì)觸發(fā)事件。
delegate() 是1.4引入的,目的是通過(guò)祖先元素來(lái)代理委派后代元素的事件綁定問(wèn)題,某種程度上和live()優(yōu)點(diǎn)相似。只不過(guò)live()是通過(guò)document元素委派,而delegate則可以是任意的祖先節(jié)點(diǎn)。使用on()實(shí)現(xiàn)代理的寫法和delegate()基本一致。
1、delegate()的寫法
2、on()寫法
貌似第一個(gè)和第二個(gè)參數(shù)的順序顛倒了一下,別的基本一樣。
當(dāng)你在給一個(gè)元素綁定事件時(shí),這個(gè)元素必須存在,否則就綁定失敗。很明顯,$(".sb1 p")在事前是不存在的(是通過(guò)點(diǎn)擊按鈕才添加進(jìn)去的),所以事件無(wú)法綁定,點(diǎn)擊也就無(wú)效了。解決辦法一是動(dòng)態(tài)綁定事件,就是在點(diǎn)擊按鈕添加p的時(shí)候一并把事件綁定進(jìn)去;方法二就是采用事件委托,把p的事件冒泡給父元素.sb1,即 $(".sb1").on("click","p",function(){...,這樣的話即使sb1中是空的也不妨礙事件綁定了(新添加的p也會(huì)自動(dòng)觸發(fā)click事件)。根據(jù)你這代碼的情況,建議使用方法二。
分享文章:jqueryon問(wèn)題,jquery解決了什么問(wèn)題
路徑分享:http://sd-ha.com/article20/dsspejo.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站收錄、App開發(fā)、搜索引擎優(yōu)化、網(wǎng)站排名、全網(wǎng)營(yíng)銷推廣、動(dòng)態(tài)網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)