jQuery on()方法綁定動(dòng)態(tài)元素的點(diǎn)擊事件無響應(yīng)的解決辦法
$('#check_all').on('click' , function(){ alert(1); }); $("#yujinlist").append(html); count++; }
以上代碼執(zhí)行時(shí),點(diǎn)擊#check_all時(shí),alert一直沒反應(yīng),后在網(wǎng)上查資料時(shí),才知道on前面的元素也必須在頁面加載的時(shí)候就存在于dom里面, 那原話是這樣的:
支持給動(dòng)態(tài)元素和屬性綁定事件的是live和on,其中l(wèi)ive在JQUERY 1.7之后就不推薦使用了?,F(xiàn)在主要用on,使用on的時(shí)候也要注意,on前面的元素也必須在頁面加載的時(shí)候就存在于dom里面。動(dòng)態(tài)的元素或者樣式等,可以放在on的第二個(gè)參數(shù)里面。
因?yàn)槲蚁容敵鱿嚓P(guān)html,再執(zhí)行就沒問題了。
<div class="row">\ <div class="col-xs-12">\ <div class="control-group">\ <label class="control-label bolder blue">選擇鎮(zhèn)街</label>\ <div class="row">\ <div class="checkbox col-xs-1">\ <label>\ <input type="checkbox" class="checkbox" id="check_all" />\ <span class="lbl">全區(qū)</span>\ </label>\ </div>\ <div id="check_item">\ <div class="checkbox col-xs-1 ">\ <label>\ <input name="towm'+count+'" type="checkbox" class="checkbox" />\ <span class="lbl">西南街道</span>\ </label>\ </div>\ <div class="checkbox col-xs-1 ">\ <label>\ <input name="towm'+count+'" type="checkbox" class="checkbox" />\ <span class="lbl">云東海街道</span>\ </label>\ </div>\ <div class="checkbox col-xs-1">\ <label>\ <input name="towm'+count+'" type="checkbox" class="checkbox" />\ <span class="lbl">白坭鎮(zhèn)</span>\ </label>\ </div>\ <div class="checkbox col-xs-1">\ <label class="block">\ <input name="towm'+count+'" type="checkbox" class="checkbox" />\ <span class="lbl">樂平鎮(zhèn)</span>\ </label>\ </div>\ <div class="checkbox col-xs-1">\ <label class="block">\ <input name="towm'+count+'" type="checkbox" class="checkbox" />\ <span class="lbl">大塘鎮(zhèn)</span>\ </label>\ </div>\ <div class="checkbox col-xs-1">\ <label class="block">\ <input name="towm'+count+'" type="checkbox" class="checkbox" />\ <span class="lbl">蘆苞鎮(zhèn)</span>\ </label>\ </div>\ <div class="checkbox col-xs-1">\ <label class="block">\ <input name="towm'+count+'" type="checkbox" class="checkbox" />\ <span class="lbl">南山鎮(zhèn)</span>\ </label>\ </div>\ </div>\ </div>\ </div>\ </div>\ </div>\ <hr />'; $('#check_all').on('click' , function(){ var that = this; $('#check_item').find('input:checkbox') .each(function(){ alert(2); this.checked = that.checked; $(this).closest('.col-xs-1').toggleClass('selected'); }); });
下面看下jquery on() 方法綁定動(dòng)態(tài)元素
jQuery on()方法是官方推薦的綁定事件的一個(gè)方法。使用 on() 方法可以給將來動(dòng)態(tài)創(chuàng)建的動(dòng)態(tài)元素綁定指定的事件,例如append等。
<div id="test"> <div class="evt">evt1</div> </div>
錯(cuò)誤的用法,下面方法只為第一個(gè)class 為 evt 的div 綁定了click事件,使用append動(dòng)態(tài)創(chuàng)建的div則沒有綁定
<script> // 先綁定事件再添加div $('#test .evt').on('click', function() {alert($(this).text())}); $('#test').append('<div class="evt">evt2</div>'); </script>
正確的用法如下:
<script> $('body').on('click', '#test .evt', function() {alert($(this).text())}); $('#test').append('<div class="evt">evt2</div>'); </script>
以上所述是小編給大家介紹的jQuery on()方法綁定動(dòng)態(tài)元素的點(diǎn)擊事件無響應(yīng)的解決辦法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
- JQuery綁定事件四種實(shí)現(xiàn)方法解析
- jquery綁定事件 bind和on的用法與區(qū)別分析
- jQuery事件綁定和解綁、事件冒泡與阻止事件冒泡及彈出應(yīng)用示例
- jquery 給動(dòng)態(tài)生成的標(biāo)簽綁定事件的幾種方法總結(jié)
- jQuery使用bind函數(shù)實(shí)現(xiàn)綁定多個(gè)事件的方法
- jQuery綁定事件方法及區(qū)別(bind,click,on,live,one)
- jQuery中的on與bind綁定事件區(qū)別實(shí)例詳解
- 淺談jquery之on()綁定事件和off()解除綁定事件
- 深入理解JQuery循環(huán)綁定事件
- jquery html動(dòng)態(tài)添加的元素綁定事件詳解
- jquery事件綁定方法介紹
相關(guān)文章
jQuery中[attribute]選擇器用法實(shí)例
這篇文章主要介紹了jQuery中[attribute]選擇器用法,以實(shí)例形式分析了[attribute]選擇器的功能、定義及匹配給定元素屬性的技巧,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12jQuery+HTML5美女瀑布流布局實(shí)現(xiàn)方法
這篇文章主要介紹了jQuery+HTML5美女瀑布流布局實(shí)現(xiàn)方法,涉及jQuery結(jié)合HTML5實(shí)現(xiàn)瀑布流效果的動(dòng)態(tài)加載功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09Jquery的autocomplete插件用法及參數(shù)講解
今天小編就為大家分享一篇關(guān)于Jquery的autocomplete插件用法及參數(shù)講解,小編覺得內(nèi)容挺不錯(cuò)的,現(xiàn)在分享給大家,具有很好的參考價(jià)值,需要的朋友一起跟隨小編來看看吧2019-03-03jQuery學(xué)習(xí)筆記之jQuery+CSS3的瀏覽器兼容性
這篇文章主要介紹了jQuery學(xué)習(xí)筆記之jQuery+CSS3的瀏覽器兼容性的相關(guān)資料,需要的朋友可以參考下2015-01-01jquery創(chuàng)建div 實(shí)現(xiàn)代碼
有時(shí)候我們需要?jiǎng)討B(tài)創(chuàng)建一個(gè)div下面是具體的實(shí)現(xiàn)代碼,大家只要熟悉了jquery的一些基本用法就能輕松的實(shí)現(xiàn)。2009-04-04Jquery Easyui選項(xiàng)卡組件Tab使用詳解(10)
這篇文章主要為大家詳細(xì)介紹了Jquery Easyui菜單組件Menu的使用方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12jquery寫個(gè)checkbox——類似郵箱全選功能
最近在學(xué)習(xí)jquery,今天抽空用jquery寫個(gè)checkbox——類似郵箱全選功能,感興趣的你可以參考下哈,希望可以幫助到你2013-03-03在其他地方你學(xué)不到的jQuery小貼士和技巧(歡迎收藏)
這篇文章主要介紹了在其他地方你學(xué)不到的jQuery小貼士和技巧(歡迎收藏)的相關(guān)資料,需要的朋友可以參考下2016-01-01