jQuery on()方法綁定動(dòng)態(tài)元素的點(diǎn)擊事件實(shí)例代碼淺析
之前就一直受這個(gè)問(wèn)題的困擾，在jQuery1.7版本之后添加了on方法，之前就了解過(guò)，其優(yōu)越性高于live(),bind(),delegate()等方法，在此之前項(xiàng)目中想用這個(gè)來(lái)測(cè)試結(jié)果發(fā)現(xiàn)，居然動(dòng)態(tài)生成的標(biāo)簽點(diǎn)擊了沒(méi)反應(yīng)，而live方法卻能夠支持，于是乎到處查資料，問(wèn)網(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)擊無(wú)效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方法,你能看見(jiàn)我嗎：' + this.value);
});
//奇數(shù)項(xiàng)綁定的點(diǎn)擊事件 發(fā)現(xiàn)點(diǎn)擊無(wú)效，而是用live方法卻能夠支持
$('input[name^=test]:odd').on('click', function () {
alert('我是無(wú)效的on方法,你不能看見(jiàn)我');
});
//奇數(shù)項(xiàng)綁定的點(diǎn)擊事件 發(fā)現(xiàn)點(diǎn)擊無(wú)效，而是用live方法卻能夠支持
$('input[name^=test]:odd').live('click', function () {
alert('我是live方法,你能看見(jiàn)我嗎：' + this.value);
});
});
以上所述是小編給大家介紹的jQuery on()方法綁定動(dòng)態(tài)元素的點(diǎn)擊事件的相關(guān)知識(shí)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
js前臺(tái)判斷開(kāi)始時(shí)間是否小于結(jié)束時(shí)間
js前臺(tái)判斷開(kāi)始時(shí)間是否小于結(jié)束時(shí)間,結(jié)合了jquery需要的朋友可以參考下2012-02-02
jquery實(shí)現(xiàn)網(wǎng)頁(yè)查找功能示例分享
當(dāng)需要在頁(yè)面中查找某個(gè)關(guān)鍵字時(shí)，一是可以通過(guò)瀏覽器的查找功能實(shí)現(xiàn)，二是可以通過(guò)前端腳本準(zhǔn)確查找定位，本文介紹通過(guò)jQuery實(shí)現(xiàn)的頁(yè)面內(nèi)容查找定位的功能，并可擴(kuò)展顯示查找后的相關(guān)信息2014-02-02
使用jQuery實(shí)現(xiàn)購(gòu)物車(chē)結(jié)算功能
這篇文章主要為大家詳細(xì)介紹了使用jQuery實(shí)現(xiàn)購(gòu)物車(chē)結(jié)算功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
使用Jquery打造最佳用戶體驗(yàn)的登錄頁(yè)面的實(shí)現(xiàn)代碼
使用Jquery打造最佳用戶體驗(yàn)的登錄頁(yè)面的實(shí)現(xiàn)代碼，改用jquery使用ajax異步驗(yàn)證，并在驗(yàn)證的過(guò)程中將頁(yè)面元素設(shè)置為不可用，防止重復(fù)登錄。2011-07-07
分析了一下JQuery中的extend方法實(shí)現(xiàn)原理
這篇文章主要介紹了通過(guò)jQuery.extend的源碼分析了一下JQuery中的extend方法實(shí)現(xiàn)原理以及使用方式，非常的詳細(xì)，這里推薦給大家，有需要的小伙伴來(lái)參考下吧。2015-02-02
Jquery Ajax.ashx 高效分頁(yè)實(shí)現(xiàn)代碼
Jquery ，大家都熟悉的一個(gè)框架，我對(duì)Jquery正在學(xué)習(xí)中，對(duì)其影響最深的當(dāng)屬 它的選擇器之強(qiáng),ajax與服務(wù)器之間的交談2009-10-10
這篇文章主要介紹了jquery中ajax處理跨域的三大方式，感興趣的小伙伴們可以參考一下2016-01-01
jquery計(jì)算出left和top,讓一個(gè)div水平垂直居中的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇jquery計(jì)算出left和top,讓一個(gè)div水平垂直居中的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-07
jQuery簡(jiǎn)單實(shí)現(xiàn)驗(yàn)證郵箱格式
這篇文章主要介紹了jQuery簡(jiǎn)單實(shí)現(xiàn)驗(yàn)證郵箱格式的相關(guān)資料,需要的朋友可以參考下2015-07-07
jquery 淡入淡出效果的簡(jiǎn)單實(shí)現(xiàn)
本篇文章主要是對(duì)jquery淡入淡出效果的簡(jiǎn)單實(shí)例進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-02-02