jQuery on()方法綁定動態(tài)元素的點(diǎn)擊事件無響應(yīng)的解決辦法
更新時間：2016年07月07日 11:22:20 作者：山檔子
這篇文章主要介紹了jQuery on()方法綁定動態(tài)元素的點(diǎn)擊事件無響應(yīng)的解決辦法的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
$('#check_all').on('click' , function(){
alert(1);
});
$("#yujinlist").append(html);
count++;
}
以上代碼執(zhí)行時，點(diǎn)擊#check_all時，alert一直沒反應(yīng)，后在網(wǎng)上查資料時，才知道on前面的元素也必須在頁面加載的時候就存在于dom里面, 那原話是這樣的：
支持給動態(tài)元素和屬性綁定事件的是live和on，其中l(wèi)ive在JQUERY 1.7之后就不推薦使用了?，F(xiàn)在主要用on，使用on的時候也要注意，on前面的元素也必須在頁面加載的時候就存在于dom里面。動態(tài)的元素或者樣式等，可以放在on的第二個參數(shù)里面。
因為我先輸出相關(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() 方法綁定動態(tài)元素
jQuery on()方法是官方推薦的綁定事件的一個方法。使用 on() 方法可以給將來動態(tài)創(chuàng)建的動態(tài)元素綁定指定的事件，例如append等。
<div id="test"> <div class="evt">evt1</div> </div>
錯誤的用法，下面方法只為第一個class 為 evt 的div 綁定了click事件，使用append動態(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()方法綁定動態(tài)元素的點(diǎn)擊事件無響應(yīng)的解決辦法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
- JQuery綁定事件四種實現(xiàn)方法解析
- jquery綁定事件 bind和on的用法與區(qū)別分析
- jQuery事件綁定和解綁、事件冒泡與阻止事件冒泡及彈出應(yīng)用示例
- jquery 給動態(tài)生成的標(biāo)簽綁定事件的幾種方法總結(jié)
- jQuery使用bind函數(shù)實現(xiàn)綁定多個事件的方法
- jQuery綁定事件方法及區(qū)別(bind,click,on,live,one)
- jQuery中的on與bind綁定事件區(qū)別實例詳解
- 淺談jquery之on()綁定事件和off()解除綁定事件
- 深入理解JQuery循環(huán)綁定事件
- jquery html動態(tài)添加的元素綁定事件詳解
- jquery事件綁定方法介紹
相關(guān)文章
jquery實現(xiàn)企業(yè)定位式導(dǎo)航效果
這篇文章主要介紹了jquery實現(xiàn)企業(yè)定位式導(dǎo)航效果2018-01-01
這篇文章主要介紹了jQuery 鏈?zhǔn)秸{(diào)用的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用jQuery，感興趣的朋友可以了解下2021-05-05
效果類似這種，自動播放，實質(zhì)控制層的顯示隱藏。需要的朋友可以參考下。2011-12-12
jQuery 工具提示可以讓網(wǎng)站上一些小的幫助信息顯示更加直觀，提升用戶的體驗。2011-05-05
下面小編就為大家?guī)硪黄狣IV隨滾動條滾動而滾動實現(xiàn)代碼【推薦】。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-04-04
jQuery綁定事件不執(zhí)行但alert后可以正常執(zhí)行
這篇文章主要為大家解決下為什么jQuery綁定事件不執(zhí)行而alert后可以正常執(zhí)行,需要的朋友可以參考下2014-06-06
下面小編就為大家?guī)硪黄趈Query的表單填充實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
JQuery.uploadify 上傳文件插件的使用詳解 for ASP.NET
今天下午整理文件上傳的例子，感覺收集到的例子都很不人性話，后來找到一個還可以的，本來想改成類似于騰訊QQ相冊那種方式，仔細(xì)看了一下是Flash的, 而且那個極速上傳插件也不知道用什么做的？問了一下，說是什么cgi. 搞得一頭霧水2010-01-01
這篇文章主要介紹了基于jquery和svg實現(xiàn)超炫酷的動畫特效,想學(xué)習(xí)SVG的童鞋們可以來參考下。2014-12-12
表單提交的時候 ，是根據(jù)元素的name這個屬性來的，只要不加name屬性 就不會提交，具體實現(xiàn)如下，感興趣的朋友可以參考下哈2013-05-05