jQuery on()方法綁定動態(tài)元素的點擊事件實例代碼淺析
之前就一直受這個問題的困擾,在jQuery1.7版本之后添加了on方法,之前就了解過,其優(yōu)越性高于live(),bind(),delegate()等方法,在此之前項目中想用這個來測試結(jié)果發(fā)現(xiàn),居然動態(tài)生成的標(biāo)簽點擊了沒反應(yīng),而live方法卻能夠支持,于是乎到處查資料,問網(wǎng)友,結(jié)果找了好久在一篇文章中終于找到了答案。。。
jQuery 使用on綁定動態(tài)生成的元素時,不能直接用該對象操作,而是選擇其非動態(tài)生成的父節(jié)點然后再找到本身才能達(dá)到效果。大家看看源碼就知道了。生成的按鈕基數(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)元素的點擊事件的相關(guān)知識,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
jQuery循環(huán)滾動展示代碼 可應(yīng)用到文字和圖片上
循環(huán)滾動展示的文字和圖片每個人都見過,實現(xiàn)類似效果的 JS 也很多。但如果只用于幾個條目或三五張圖片,體積龐大的 JS 會浪費資源2012-05-05Jquery動態(tài)替換div內(nèi)容及動態(tài)展示的方法
這篇文章主要介紹了Jquery動態(tài)替換div內(nèi)容及動態(tài)展示的方法,動態(tài)替換div內(nèi)容并展示的使用技巧與注意事項,需要的朋友可以參考下2015-01-01jQuery插件開發(fā)的兩種方法及$.fn.extend的詳解
jQuery插件開發(fā)分為兩種:1 類級別、2 對象級別,下面為大家詳細(xì)介紹下2014-01-01jQuery移除tr無效的解決方法(tr是動態(tài)添加)
移除掉某些tr(tr是動態(tài)添加的)嘗試了很多方法,都不見效,后來發(fā)現(xiàn)個不錯的方法,于是與大家分享下2014-09-09jQuery實現(xiàn)垂直半透明手風(fēng)琴特效代碼分享
這是一款jquery hover抽屜式導(dǎo)航圖片展開收縮切換特效代碼,用戶還可以自定義對應(yīng)幻燈片的標(biāo)題與文字說明,是一款非常實用的幻燈片特效源碼。2015-08-08