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 相关文章推荐
动态添加js事件实现代码
Mar 12 Javascript
jquery 笔记 事件
Nov 02 Javascript
可编辑下拉框的2种实现方式
Jun 13 Javascript
多种方法实现360浏览器下禁止自动填写用户名密码
Jun 16 Javascript
javascript实现验证IP地址等相关信息代码
May 10 Javascript
使用postMesssage()实现iframe跨域页面间的信息传递
Mar 29 Javascript
微信小程序开发(一) 微信登录流程详解
Jan 11 Javascript
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
Apr 23 Javascript
angular bootstrap timepicker TypeError提示怎么办
Jun 13 Javascript
javaScript日期工具类DateUtils详解
Dec 08 Javascript
vue中前进刷新、后退缓存用户浏览数据和浏览位置的实例讲解
Sep 21 Javascript
小程序获取周围IBeacon设备的方法
Oct 31 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
yii2.0实现验证用户名与邮箱功能
2015/12/22 PHP
php 二维数组时间排序实现代码
2016/11/19 PHP
javascript TextArea动态显示剩余字符
2008/10/22 Javascript
使用JavaScript switch case 另类写法
2010/03/14 Javascript
基于jQuery制作迷你背词汇工具
2010/07/27 Javascript
javascript hashtable 修正版 下载
2010/12/30 Javascript
基于NodeJS的前后端分离的思考与实践(一)全栈式开发
2014/09/26 NodeJs
ECMAScript6新增值比较函数Object.is
2015/06/12 Javascript
Js+Ajax,Get和Post在使用上的区别小结
2016/06/08 Javascript
js 转json格式的字符串为对象或数组(前后台)的方法
2016/11/02 Javascript
详解Angularjs 如何自定义Img的ng-load 事件
2017/02/15 Javascript
解决vue动态为数据添加新属性遇到的问题
2018/09/18 Javascript
node+express框架中连接使用mysql(经验总结)
2018/11/10 Javascript
Vue 处理表单input单行文本框的实例代码
2019/05/09 Javascript
JS运算符简单用法示例
2020/01/19 Javascript
Python 分析Nginx访问日志并保存到MySQL数据库实例
2014/03/13 Python
Ubuntu 14.04+Django 1.7.1+Nginx+uwsgi部署教程
2014/11/18 Python
Python实现windows下模拟按键和鼠标点击的方法
2015/03/13 Python
Python记录详细调用堆栈日志的方法
2015/05/05 Python
Python批量按比例缩小图片脚本分享
2015/05/21 Python
Python常用时间操作总结【取得当前时间、时间函数、应用等】
2017/05/11 Python
Python一行代码实现快速排序的方法
2019/04/30 Python
Django框架中间件(Middleware)用法实例分析
2019/05/24 Python
Python使用sklearn实现的各种回归算法示例
2019/07/04 Python
python模拟键盘输入 切换键盘布局过程解析
2019/08/15 Python
解决TensorFlow训练内存不断增长,进程被杀死问题
2020/02/05 Python
pytorch VGG11识别cifar10数据集(训练+预测单张输入图片操作)
2020/06/24 Python
HTML5网页录音和上传到服务器支持PC、Android,支持IOS微信功能
2019/04/26 HTML / CSS
关于廉洁的广播稿
2014/01/30 职场文书
《高尔基和他的儿子》教学反思
2014/04/09 职场文书
党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
法制工作总结2015
2015/07/23 职场文书
司法廉洁教育心得体会
2016/01/20 职场文书
幼儿园教师培训心得体会
2016/01/21 职场文书
同学联谊会邀请函
2019/06/24 职场文书
ConditionalOnProperty配置swagger不生效问题及解决
2022/06/14 Java/Android