快捷導(dǎo)航

jQuery on()方法綁定動(dòng)態(tài)元素的點(diǎn)擊事件實(shí)例代碼淺析

更新時(shí)間：2016年06月16日 14:21:11 投稿：mrr

這篇文章主要介紹了jQuery on()方法綁定動(dòng)態(tài)元素的點(diǎn)擊事件的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下

之前就一直受這個(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)站的支持！

您可能感興趣的文章: