jQuery on()方法绑定动态元素的点击事件无响应的解决办法


Posted in Javascript onJuly 07, 2016
$('#check_all').on('click' , function(){
alert(1);
});
$("#yujinlist").append(html);
count++; 
}

以上代码执行时,点击#check_all时,alert一直没反应,后在网上查资料时,才知道on前面的元素也必须在页面加载的时候就存在于dom里面, 那原话是这样的:

支持给动态元素和属性绑定事件的是live和on,其中live在JQUERY 1.7之后就不推荐使用了。现在主要用on,使用on的时候也要注意,on前面的元素也必须在页面加载的时候就存在于dom里面。动态的元素或者样式等,可以放在on的第二个参数里面。

因为我先输出相关html,再执行就没问题了。

<div class="row">\
<div class="col-xs-12">\
<div class="control-group">\
<label class="control-label bolder blue">选择镇街</label>\
<div class="row">\
<div class="checkbox col-xs-1">\
<label>\
<input type="checkbox" class="checkbox" id="check_all" />\
<span class="lbl">全区</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">白坭镇</span>\
</label>\
</div>\
<div class="checkbox col-xs-1">\
<label class="block">\
<input name="towm'+count+'" type="checkbox" class="checkbox" />\
<span class="lbl">乐平镇</span>\
</label>\
</div>\
<div class="checkbox col-xs-1">\
<label class="block">\
<input name="towm'+count+'" type="checkbox" class="checkbox" />\
<span class="lbl">大塘镇</span>\
</label>\
</div>\
<div class="checkbox col-xs-1">\
<label class="block">\
<input name="towm'+count+'" type="checkbox" class="checkbox" />\
<span class="lbl">芦苞镇</span>\
</label>\
</div>\
<div class="checkbox col-xs-1">\
<label class="block">\
<input name="towm'+count+'" type="checkbox" class="checkbox" />\
<span class="lbl">南山镇</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() 方法绑定动态元素

jQuery on()方法是官方推荐的绑定事件的一个方法。使用 on() 方法可以给将来动态创建的动态元素绑定指定的事件,例如append等。

<div id="test">
<div class="evt">evt1</div>
</div>

错误的用法,下面方法只为第一个class 为 evt 的div 绑定了click事件,使用append动态创建的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()方法绑定动态元素的点击事件无响应的解决办法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
php gethostbyname获取域名ip地址函数详解
Jan 24 Javascript
javascript循环变量注册dom事件 之强大的闭包
Sep 08 Javascript
js如何获取file控件的完整路径具体实现代码
May 15 Javascript
jQuery动态地获取系统时间实现代码
May 24 Javascript
JavaScript字符串对象charAt方法入门实例(用于取得指定位置的字符)
Oct 17 Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
May 09 Javascript
Vue.directive自定义指令的使用详解
Mar 10 Javascript
js控制文本框禁止输入特殊字符详解
Apr 07 Javascript
基于easyui checkbox 的一些操作处理方法
Jul 10 Javascript
jQuery创建及操作xml格式数据示例
May 26 jQuery
小程序实现横向滑动日历效果
Oct 21 Javascript
node.js使用fs读取文件出错的解决方案
Oct 23 Javascript
Bootstrap3使用typeahead插件实现自动补全功能
Jul 07 #Javascript
Node.js DES加密的简单实现
Jul 07 #Javascript
使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法
Jul 07 #Javascript
使用Bootstrap typeahead插件实现搜索框自动补全的方法
Jul 07 #Javascript
jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
Apr 16 #Javascript
内容滑动切换效果jquery.hwSlide.js插件封装
Jul 07 #Javascript
jQuery实现下拉菜单(内容为时间)的实时更新及图表的随动更新的方法
Jul 07 #Javascript
You might like
使用PHP实现二分查找算法代码分享
2011/06/24 PHP
PHP 命令行工具 shell_exec, exec, passthru, system详细使用介绍
2011/09/11 PHP
PHP实现算式验证码和汉字验证码实例
2015/03/09 PHP
php使用Image Magick将PDF文件转换为JPG文件的方法
2015/04/01 PHP
php 读取输出其他文件的实现方法
2016/07/26 PHP
ThinkPHP 3.2.2实现事务操作的方法
2017/05/05 PHP
php-msf源码详解
2017/12/25 PHP
浅谈php常用的7大框架的优缺点
2020/07/20 PHP
JS实现悬浮移动窗口(悬浮广告)的特效
2013/03/12 Javascript
网页防止tab键的使用快速解决方法
2013/11/07 Javascript
Js 导出table内容到Excel的简单实例
2013/11/19 Javascript
JavaScript的常见兼容问题及相关解决方法(chrome/IE/firefox)
2013/12/31 Javascript
javascript中兼容主流浏览器的动态生成iframe方法
2014/05/05 Javascript
node.js中的fs.readdirSync方法使用说明
2014/12/17 Javascript
Angularjs使用directive自定义指令实现attribute继承的方法详解
2016/08/05 Javascript
关于Javascript中document.cookie的使用
2017/03/08 Javascript
js导出Excel表格超出26位英文字符的解决方法ES6
2017/11/15 Javascript
Tornado Web服务器多进程启动的2个方法
2014/08/04 Python
tensorflow输出权重值和偏差的方法
2018/02/10 Python
Python面向对象思想与应用入门教程【类与对象】
2019/04/12 Python
Selenium之模拟登录铁路12306的示例代码
2020/07/31 Python
澳大利亚家具和家居用品在线:BROSA
2017/11/02 全球购物
数控专业毕业生求职信范文
2013/09/21 职场文书
安全事故检讨书
2014/01/18 职场文书
小学生学雷锋演讲稿
2014/04/25 职场文书
安全教育月活动总结
2014/05/05 职场文书
做一个有道德的人活动方案
2014/08/25 职场文书
2015年五一劳动节演讲稿
2015/03/18 职场文书
答谢酒会主持词
2015/07/02 职场文书
公司保密管理制度
2015/08/04 职场文书
学生会部长竞选稿
2015/11/19 职场文书
2016年6月份红领巾广播稿
2015/12/21 职场文书
推荐六本经典文学奖书籍:此生必读
2019/08/22 职场文书
不负正版帝国之名 《重返帝国》引领SLG手游制作新的标杆
2022/04/07 其他游戏
科学家测试在太空中培育人造肉,用于未来太空旅行
2022/04/29 数码科技
苹果macOS 13开发者预览版Beta 8发布 正式版10月发布
2022/09/23 数码科技