jQuery綁定事件on()與彈窗的簡要概述
頁面上經(jīng)常會有彈窗,有的彈窗是動態(tài)生成的,有的彈窗是在頁面底部隱藏的,對于動態(tài)生成的彈窗,如果要監(jiān)聽彈窗的事件,可以使用jQuery的事件綁定on()方法實現(xiàn)。
如圖,彈窗是js動態(tài)生成的,通過點擊某個鏈接彈出,彈窗中的“立即去使用”鏈接點擊后,實現(xiàn)的效果是關(guān)閉彈窗,并跳轉(zhuǎn)到錨點。
這個a標(biāo)簽是:
<astyle="display:" title="立即去使用" target="_blank" gid="167" class="co_vip tdu ">立即去使用</a>
我們要監(jiān)聽彈窗里面的click事件,但這個彈窗本身是動態(tài)生成的,因此我們要監(jiān)聽body,通過on()事件綁定,當(dāng)動態(tài)生成這個彈窗時,可以監(jiān)聽到click方法:
function jump_to_anchor() { $("body").on("click", "span[name='msgbox_info'] a, .act-pop-table a", function (e) { link = $(this).attr('href'); if (link == 'http://act.vip.xunlei.com/vip/2016/51dps/#gamelist') { e.preventDefault(); msgExit(); window.location.href = link; } }); }
這里實際上是綁定了兩個a標(biāo)簽的事件綁定,都是當(dāng)這個鏈接是某個url,阻止默認(rèn)行為,并調(diào)用關(guān)閉彈窗方法,跳轉(zhuǎn)到該鏈接,也就是錨點。
下面給大家介紹jQuery on()方法綁定動態(tài)元素的點擊事件
之前就一直受這個問題的困擾,在jQuery1.7版本之后添加了on方法,之前就了解過,其優(yōu)越性高于live(),bind(),delegate()等方法,在此之前項目中想用這個來測試結(jié)果發(fā)現(xiàn),居然動態(tài)生成的標(biāo)簽點擊了沒反應(yīng),而live方法卻能夠支持,于是乎到處查資料,問網(wǎng)友,結(jié)果找了好久在一篇文章中終于找到了答案。。。
jQuery 使用on綁定動態(tài)生成的元素時,不能直接用該對象操作,而是選擇其非動態(tài)生成的父節(jié)點然后再找到本身才能達(dá)到效果。大家看看源碼就知道了。生成的按鈕基數(shù)項on方法點擊無效live方法有效。
比如頁面上有下邊兩個元素:
<input type="button" name="addbtn" value="按鈕添加" /> <div id="test"></div>
使用下邊的jQuery代碼大家可以對比看看區(qū)別:
$(function () { var a = 1, $_div = $('#test'); $('input[name=addbtn]').on('click', function () { $_div.append('<input type="button" name="test' + a + '" value="按鈕' + a + '"/>'); a++; }); //偶數(shù)項點擊事件 $_div.on('click', 'input[name^=test]:even', function () { alert('我是有效的on方法,你能看見我嗎:' + this.value); }); //奇數(shù)項綁定的點擊事件 發(fā)現(xiàn)點擊無效,而是用live方法卻能夠支持 $('input[name^=test]:odd').on('click', function () { alert('我是無效的on方法,你不能看見我'); }); //奇數(shù)項綁定的點擊事件 發(fā)現(xiàn)點擊無效,而是用live方法卻能夠支持 $('input[name^=test]:odd').live('click', function () { alert('我是live方法,你能看見我嗎:' + this.value); }); });
代碼簡單,就不放演示頁了,如果有什么不明白的,歡迎給我留言,小編會及時回復(fù)大家的!
相關(guān)文章
JQuery 引發(fā)兩次$(document.ready)事件
ASP.net MVC 做了個工程,不知道為什么Search按就總是執(zhí)行兩次。2010-01-01juqery 學(xué)習(xí)之三 選擇器 層級 基本
juqery 學(xué)習(xí)之三 選擇器 層級 基本,學(xué)習(xí)jquery的朋友可以參考下。2010-11-11基于jquery的當(dāng)鼠標(biāo)滾輪到最底端繼續(xù)加載新數(shù)據(jù)思路分享(多用于微博、空間、論壇 )
基于jquery的當(dāng)鼠標(biāo)滾輪到最底端繼續(xù)加載新數(shù)據(jù)思路分享(多用于微博、空間、論壇 ),需要的朋友可以參考下。2011-10-10