欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery綁定事件on()與彈窗的簡(jiǎn)要概述

 更新時(shí)間:2016年04月27日 10:34:46   投稿:mrr  
頁(yè)面上經(jīng)常會(huì)有彈窗,有的彈窗是動(dòng)態(tài)生成的,有的彈窗是在頁(yè)面底部隱藏的,對(duì)于動(dòng)態(tài)生成的彈窗,如果要監(jiān)聽彈窗的事件,可以使用jQuery的事件綁定on()方法實(shí)現(xiàn)

頁(yè)面上經(jīng)常會(huì)有彈窗,有的彈窗是動(dòng)態(tài)生成的,有的彈窗是在頁(yè)面底部隱藏的,對(duì)于動(dòng)態(tài)生成的彈窗,如果要監(jiān)聽彈窗的事件,可以使用jQuery的事件綁定on()方法實(shí)現(xiàn)。

如圖,彈窗是js動(dòng)態(tài)生成的,通過點(diǎn)擊某個(gè)鏈接彈出,彈窗中的“立即去使用”鏈接點(diǎn)擊后,實(shí)現(xiàn)的效果是關(guān)閉彈窗,并跳轉(zhuǎn)到錨點(diǎn)。


這個(gè)a標(biāo)簽是:

<astyle="display:" title="立即去使用" target="_blank" gid="167"  class="co_vip tdu ">立即去使用</a>

我們要監(jiān)聽彈窗里面的click事件,但這個(gè)彈窗本身是動(dòng)態(tài)生成的,因此我們要監(jiān)聽body,通過on()事件綁定,當(dāng)動(dòng)態(tài)生成這個(gè)彈窗時(shí),可以監(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;
}
});
}

這里實(shí)際上是綁定了兩個(gè)a標(biāo)簽的事件綁定,都是當(dāng)這個(gè)鏈接是某個(gè)url,阻止默認(rèn)行為,并調(diào)用關(guān)閉彈窗方法,跳轉(zhuǎn)到該鏈接,也就是錨點(diǎn)。

下面給大家介紹jQuery on()方法綁定動(dòng)態(tài)元素的點(diǎn)擊事件

之前就一直受這個(gè)問題的困擾,在jQuery1.7版本之后添加了on方法,之前就了解過,其優(yōu)越性高于live(),bind(),delegate()等方法,在此之前項(xiàng)目中想用這個(gè)來測(cè)試結(jié)果發(fā)現(xiàn),居然動(dòng)態(tài)生成的標(biāo)簽點(diǎn)擊了沒反應(yīng),而live方法卻能夠支持,于是乎到處查資料,問網(wǎng)友,結(jié)果找了好久在一篇文章中終于找到了答案。。。

jQuery 使用on綁定動(dòng)態(tài)生成的元素時(shí),不能直接用該對(duì)象操作,而是選擇其非動(dòng)態(tài)生成的父節(jié)點(diǎn)然后再找到本身才能達(dá)到效果。大家看看源碼就知道了。生成的按鈕基數(shù)項(xiàng)on方法點(diǎn)擊無效live方法有效。

比如頁(yè)面上有下邊兩個(gè)元素:

<input type="button" name="addbtn" value="按鈕添加" />
<div id="test"></div>

使用下邊的jQuery代碼大家可以對(duì)比看看區(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ù)項(xiàng)點(diǎn)擊事件
$_div.on('click', 'input[name^=test]:even', function () { 
alert('我是有效的on方法,你能看見我嗎:' + this.value);
});
//奇數(shù)項(xiàng)綁定的點(diǎn)擊事件 發(fā)現(xiàn)點(diǎn)擊無效,而是用live方法卻能夠支持
$('input[name^=test]:odd').on('click', function () { 
alert('我是無效的on方法,你不能看見我');
});
//奇數(shù)項(xiàng)綁定的點(diǎn)擊事件 發(fā)現(xiàn)點(diǎn)擊無效,而是用live方法卻能夠支持
$('input[name^=test]:odd').live('click', function () {
alert('我是live方法,你能看見我嗎:' + this.value);
});
});

代碼簡(jiǎn)單,就不放演示頁(yè)了,如果有什么不明白的,歡迎給我留言,小編會(huì)及時(shí)回復(fù)大家的!

相關(guān)文章

最新評(píng)論