DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> jQuery on()方法綁定動態元素的點擊事件實例代碼淺析
jQuery on()方法綁定動態元素的點擊事件實例代碼淺析
編輯:關於JavaScript     

之前就一直受這個問題的困擾,在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);
});
});

以上所述是小編給大家介紹的jQuery on()方法綁定動態元素的點擊事件的相關知識,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對百度網站的支持!

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved