jQuery綁定事件on()與彈跳視窗的簡要概述_jquery

頁面上經常會有彈跳窗，有的彈跳窗是動態產生的，有的彈跳窗是在頁面底部隱藏的，對於動態產生的彈窗，如果要監聽彈窗的事件，可以使用jQuery的事件綁定on()方法實作。

如圖，彈跳窗是js動態產生的，透過點擊某個連結彈出，彈跳視窗中的「立即去使用」連結點擊後，實現的效果是關閉彈窗，並跳到錨點。

這個a標籤是：

<astyle="display:" title="立即去使用" target="_blank" gid="167" href="http://act.vip.xunlei.com/vip/2016/51dps/#gamelist" class="co_vip tdu ">立即去使用</a>

我們要監聽彈窗裡面的click事件，但這個彈跳窗本身是動態產生的，因此我們要監聽body，透過on()事件綁定，當動態產生這個彈跳窗時，可以監聽到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標籤的事件綁定，都是當這個鏈接是某個url，阻止默認行為，並調用關閉彈窗方法，跳到該鏈接，也就是錨點。

下面要跟大家介紹jQuery on()方法綁定動態元素的點擊事件

之前就一直受這個問題的困擾，在jQuery1.7版本之後添加了on方法，之前就了解過，其優越性高於live(),bind(),delegate()等方法，在此之前專案中想用這個來測試結果發現，居然動態生成的標籤點擊了沒反應，而live方法卻能夠支持，於是乎到處查資料，問網友，結果找了好久在一篇文章中終於找到了答案。 。 。

jQuery 使用on綁定動態產生的元素時，不能直接用該物件操作，而是選擇其非動態產生的父節點然後再找到本身才能達到效果。大家看看原始碼就知道了。產生的按鈕基數項on方法點選無效live方法有效。

例如頁面上有下邊兩個元素：

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

使用下邊的jQuery程式碼大家可以比較看看差異：

$(function () {
var a = 1,
$_div = $('#test');
$('input[name=addbtn]').on('click', function () {
$_div.append('<input type="button" name="test' + a + '" value="按钮' + a + '"/>');
a++;
});
//偶数项点击事件
$_div.on('click', 'input[name^=test]:even', function () {
alert('我是有效的on方法,你能看见我吗：' + this.value);
});
//奇数项绑定的点击事件 发现点击无效，而是用live方法却能够支持
$('input[name^=test]:odd').on('click', function () {
alert('我是无效的on方法,你不能看见我');
});
//奇数项绑定的点击事件 发现点击无效，而是用live方法却能够支持
$('input[name^=test]:odd').live('click', function () {
alert('我是live方法,你能看见我吗：' + this.value);
});
});

程式碼簡單，就不放示範頁了，如果有什麼不明白的，歡迎給我留言，小編會及時回覆大家的！