jQuery绑定事件不执行但alert后可以正常执行


Posted in Javascript onJune 03, 2014

因为我不知道怎么描述这个问题,故标题起的这么坑爹

主要过程是这样的,今天我写一个类似于百度知道那样有提问答案的页面,所有的数据都是页面第一次加载时通过ajax得到的
jQuery绑定事件不执行但alert后可以正常执行 
希望实现的效果是提问者可以通过店家每个答案后面的星星符号选择采纳此答案,被采纳的答案星星图标会变成全黑的。

开始我是这样写的

$('.choose_right_answer').bind('click',function(){ 
if(currentUser==questioner) { 
if ($(this).attr("src") == "img/star_fav_empty.png") 
$(this).attr("src", "img/star_fav.png"); 
else 
$(this).attr("src", "img/star_fav_empty.png"); 
} 
});

.choose_right_answer是每个星星class名

运行之后点击星星没有反应

于是我在上面所示代码段之前加上了一个alert("test")

此时加载页面后弹出对话框test之后,星星图标上绑定的事件可以正常执行。

上网搜了一通答案,得到的结果是由于所有的这些答案的节点都是动态生成的,因此可能在这些节点还没有执行完时,就执行了事件绑定,以至于并没有真正将事件绑定到生成的这些答案的节点。

而加上alert之后,可以明显看到,alert语句在所有数据得到后才执行,确保了事件绑定在数据加载完之后执行,因此事件成功绑定到了各个回答上。
http://img.blog.csdn.net/20140531202827265
解决方法,使用jQuery中的on来绑定事件

$("#answer_wrap").on('click','.choose_right_answer',function(){ 
if(currentUser==questioner) { 
if ($(this).attr("src") == "img/star_fav_empty.png") 
$(this).attr("src", "img/star_fav.png"); 
else 
$(this).attr("src", "img/star_fav_empty.png"); 
} 
});

answer_wrap是所有回答所在块的id

所有在这个块里class为choose_right_answer的元素如果发生点击则事件冒泡到answer_wrap,执行对应函数,其余在这个块中的元素发生点击事件则忽略

这样就可以解决动态加载数据中事件绑定的问题

Javascript 相关文章推荐
js函数排序的实例代码
Jul 01 Javascript
jquery delay()介绍及使用指南
Sep 02 Javascript
jQuery实现下拉框功能实例代码
May 06 Javascript
jQuery Ajax 异步加载显示等待效果代码分享
Aug 01 Javascript
vue 数组和对象不能直接赋值情况和解决方法(推荐)
Oct 25 Javascript
详解关于vue2.0工程发布上线操作步骤
Sep 27 Javascript
小程序实现单选多选功能
Nov 04 Javascript
layui中select,radio设置不生效的解决方法
Sep 05 Javascript
JSONP 的原理、理解 与 实例分析
May 16 Javascript
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
Jul 24 Javascript
vue-cli3 引入 font-awesome的操作
Aug 11 Javascript
解决ant Design中Select设置initialValue时的大坑
Oct 29 Javascript
javascript圆盘抽奖程序实现原理和完整代码例子
Jun 03 #Javascript
jQuery多项选项卡的实现思路附样式及代码
Jun 03 #Javascript
jquery动态改变form属性提交表单
Jun 03 #Javascript
javascript判断是手机还是电脑访问网页的简单实例分享
Jun 03 #Javascript
jQuery学习笔记之jQuery构建函数的7种方法
Jun 03 #Javascript
在myeclipse中如何加入jquery代码提示功能
Jun 03 #Javascript
jQuery学习笔记之总体架构
Jun 03 #Javascript
You might like
再说下636单管机
2021/03/02 无线电
深入理解PHP原理之异常机制
2010/08/21 PHP
PHP中对缓冲区的控制实现代码
2013/09/29 PHP
Yii2框架实现登录、退出及自动登录功能的方法详解
2017/10/24 PHP
php实现映射操作实例详解
2019/10/02 PHP
jQuery 入门讲解1
2009/04/15 Javascript
input按钮的事件处理大全
2010/12/10 Javascript
jquery实现显示已选用户
2014/07/21 Javascript
JavaScript中的Math.atan2()方法使用详解
2015/06/15 Javascript
javascript实现检验的各种规则
2015/07/31 Javascript
详解javascript中的事件处理
2015/11/06 Javascript
基于jQuery实现左右图片轮播(原理通用)
2015/12/24 Javascript
jQuery实现的跨容器无缝拖动效果代码
2016/06/21 Javascript
利用jQuery实现滑动开关按钮效果(附demo源码下载)
2017/02/07 Javascript
详解Angularjs 如何自定义Img的ng-load 事件
2017/02/15 Javascript
JavaScript登录记住密码操作(超简单代码)
2017/03/22 Javascript
JavaScript实现淘宝京东6位数字支付密码效果
2018/08/18 Javascript
vue项目前端知识点整理【收藏】
2019/05/13 Javascript
微信小程序-API接口安全详解
2019/07/16 Javascript
JS数组及对象遍历方法代码汇总
2020/06/16 Javascript
在Uni中使用Vue的EventBus总线机制操作
2020/07/31 Javascript
[46:10]2014 DOTA2国际邀请赛中国区预选赛 CnB VS HGT
2014/05/21 DOTA
详解Python实现多进程异步事件驱动引擎
2017/08/25 Python
详解Python里使用正则表达式的ASCII模式
2017/11/02 Python
python numpy 显示图像阵列的实例
2018/07/02 Python
Python XlsxWriter模块Chart类用法实例分析
2019/03/11 Python
Python 使用threading+Queue实现线程池示例
2019/12/21 Python
Python加密模块的hashlib,hmac模块使用解析
2020/01/02 Python
html5 canvas的绘制文本自动换行的示例代码
2018/09/17 HTML / CSS
.NET是怎么支持多种语言的
2015/02/24 面试题
什么是网络协议
2016/04/07 面试题
大专毕业生自我评价分享
2013/11/10 职场文书
应用化学专业职业生涯规划书
2013/12/31 职场文书
父母对孩子的寄语
2014/04/09 职场文书
2015年小学语文工作总结
2015/05/25 职场文书
导游词之金鞭溪风景区
2019/09/12 职场文书