資源描述：
《jquery綁定事件on()與彈窗的簡(jiǎn)要概述_jquery》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在工程資料-天天文庫(kù)。
1、頁(yè)面上經(jīng)常會(huì)有彈窗，有的彈窗是動(dòng)態(tài)生成的，有的彈窗是在頁(yè)面底部隱藏的,對(duì)于動(dòng)態(tài)生成的彈窗，如果要監(jiān)聽(tīng)彈窗的事件，可以使用jQuery的事件綁定on()方法實(shí)現(xiàn)。如圖，彈窗是js動(dòng)態(tài)生成的，通過(guò)點(diǎn)擊某個(gè)鏈接彈出，彈窗中的“立即去使用”鏈接點(diǎn)擊后，實(shí)現(xiàn)的效果是關(guān)閉彈窗，并跳轉(zhuǎn)到錨點(diǎn)。獎(jiǎng)品查詢X會(huì)員會(huì)題值禮友放時(shí)問(wèn)3?品名稱3?品信息2016-04-2512:133元手游代甜codetest024V7即去偉用親.婦異您中獎(jiǎng)所得獎(jiǎng)品為實(shí)物獎(jiǎng)品■請(qǐng)雋必填寫(xiě)”實(shí)物獎(jiǎng)品收貨信息"?以方便我們盡快為您派獎(jiǎng)謝謝！觴的倏券激這個(gè)a標(biāo)簽是:〈astyle二"display:〃title
2、二〃立即去使用"target二〃_blank"gid二"167〃href=，/http://act?vip.xunlei.com/vip/2016/51dps/#gamelist〃class二〃coviptdu">立即去使用〈/a>我們要監(jiān)聽(tīng)彈窗里面的click事件，但這個(gè)彈窗木身是動(dòng)態(tài)生成的，因此我們要監(jiān)聽(tīng)body,通過(guò)on()事件綁定，當(dāng)動(dòng)態(tài)生成這個(gè)彈窗時(shí)，可以監(jiān)聽(tīng)到click方法：functionjump_to_anchor(){$(z，body〃).on("click",^spantname^msgbox_infoJ]a,?act-pop-tablea",
3、function(e){link=$(this).attr(，href，);if(1ink二二'http://act.vip.xunlei.eom/vip/2016/51dps/#gdmelist'){c.proventDcfaultO;msgExit();window.1ocation.href=link;}})；}這里實(shí)際上是綁定了兩個(gè)3標(biāo)簽的事件綁定，都是當(dāng)這個(gè)鏈接是某個(gè)url,阻止默認(rèn)行為，并調(diào)用關(guān)閉彈窗方法，跳轉(zhuǎn)到該鏈接，也就是錨點(diǎn)。下面給大家介紹jQueryon()方法綁定動(dòng)態(tài)元素的點(diǎn)擊事件之前就-直受這個(gè)問(wèn)題的怵I擾，在jQueryl.7版木之后添加
4、了on方法，之前就了解過(guò)，其優(yōu)越性高于live(),bind(),delegate()等方法,在此之前項(xiàng)目中想用這個(gè)來(lái)測(cè)試結(jié)果發(fā)現(xiàn)，居然動(dòng)態(tài)生成的標(biāo)簽點(diǎn)擊了沒(méi)反應(yīng)，而live方法卻能夠支持，丁是乎到處查資料，問(wèn)網(wǎng)友，結(jié)果找了好久在一篇文章屮終于找到了答OOOjQuery使用on綁定動(dòng)態(tài)生成的元素時(shí)，不能宜接用該對(duì)象操作，而是選擇其非動(dòng)態(tài)生成的父節(jié)點(diǎn)然后再找到本身才能達(dá)到效果。大家看看源碼就知道了。生成的按鈕基數(shù)項(xiàng)on方法點(diǎn)擊無(wú)效live方法有效。比如頁(yè)而上冇下邊兩個(gè)元素：〈inputtype二〃buttoname二〃addbtvalue二〃按鈕添加1〃/>5、id二〃test">〈/div>使用下邊的JQuery代碼大家可以對(duì)比看看區(qū)別：$(function(){vara=1,$_div二$('#test，);$('input[neinic二addbtn]').on('click',function(){$_div.append('〈inputtype="button"name="test'+a+'"value二〃按鈕'+a+'〃/>');a++;})；〃偶數(shù)項(xiàng)點(diǎn)擊事件$_div.on('click',，input[name'test]:even',function(){alert（J我是冇效的on方法，你能看見(jiàn)我嗎：
6、’+this,value）;｝）；〃奇數(shù)項(xiàng)綁定的點(diǎn)擊事件發(fā)現(xiàn)點(diǎn)擊無(wú)效，而是用live方法卻能夠支持$（'input[nam「二test]:odd，）.on（'click，,function（）｛alert（'我是無(wú)效的on方法，你不能看見(jiàn)我'）；｝）；〃奇數(shù)項(xiàng)綁定的點(diǎn)擊事件發(fā)現(xiàn)點(diǎn)擊無(wú)效，而是用live方法卻能夠支持$（，input[name^=test]:odd，）?live（'click',function（）｛alertC我是live方法，你能看見(jiàn)我嗎：’+this,value）;｝）；｝）；代碼簡(jiǎn)單，就不放演示頁(yè)了，如果有什么不明白的，歡迎給我留言，小編會(huì)及
7、時(shí)回復(fù)大家的！
