jQuery on()方法綁定動態(tài)元素的點擊事件實例代碼淺析
更新時間：2016年06月16日 14:21:11 投稿：mrr
這篇文章主要介紹了jQuery on()方法綁定動態(tài)元素的點擊事件的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
之前就一直受這個問題的困擾，在jQuery1.7版本之后添加了on方法，之前就了解過，其優(yōu)越性高于live(),bind(),delegate()等方法，在此之前項目中想用這個來測試結果發(fā)現(xiàn)，居然動態(tài)生成的標簽點擊了沒反應，而live方法卻能夠支持，于是乎到處查資料，問網(wǎng)友，結果找了好久在一篇文章中終于找到了答案。。。
jQuery 使用on綁定動態(tài)生成的元素時，不能直接用該對象操作，而是選擇其非動態(tài)生成的父節(jié)點然后再找到本身才能達到效果。大家看看源碼就知道了。生成的按鈕基數(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);
});
});
以上所述是小編給大家介紹的jQuery on()方法綁定動態(tài)元素的點擊事件的相關知識，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關文章
js前臺判斷開始時間是否小于結束時間,結合了jquery需要的朋友可以參考下2012-02-02
jquery實現(xiàn)網(wǎng)頁查找功能示例分享
當需要在頁面中查找某個關鍵字時，一是可以通過瀏覽器的查找功能實現(xiàn)，二是可以通過前端腳本準確查找定位，本文介紹通過jQuery實現(xiàn)的頁面內(nèi)容查找定位的功能，并可擴展顯示查找后的相關信息2014-02-02
這篇文章主要為大家詳細介紹了使用jQuery實現(xiàn)購物車結算功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
使用Jquery打造最佳用戶體驗的登錄頁面的實現(xiàn)代碼
使用Jquery打造最佳用戶體驗的登錄頁面的實現(xiàn)代碼，改用jquery使用ajax異步驗證，并在驗證的過程中將頁面元素設置為不可用，防止重復登錄。2011-07-07
分析了一下JQuery中的extend方法實現(xiàn)原理
這篇文章主要介紹了通過jQuery.extend的源碼分析了一下JQuery中的extend方法實現(xiàn)原理以及使用方式，非常的詳細，這里推薦給大家，有需要的小伙伴來參考下吧。2015-02-02
Jquery Ajax.ashx 高效分頁實現(xiàn)代碼
Jquery ，大家都熟悉的一個框架，我對Jquery正在學習中，對其影響最深的當屬 它的選擇器之強,ajax與服務器之間的交談2009-10-10
這篇文章主要介紹了jquery中ajax處理跨域的三大方式，感興趣的小伙伴們可以參考一下2016-01-01
jquery計算出left和top,讓一個div水平垂直居中的簡單實例
下面小編就為大家?guī)硪黄猨query計算出left和top,讓一個div水平垂直居中的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
這篇文章主要介紹了jQuery簡單實現(xiàn)驗證郵箱格式的相關資料,需要的朋友可以參考下2015-07-07
本篇文章主要是對jquery淡入淡出效果的簡單實例進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02