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 相关文章推荐
利用XMLHTTP传递参数在另一页面执行并刷新本页
Oct 26 Javascript
JS操作数据库的实例代码
Oct 17 Javascript
做好七件事帮你提升jQuery的性能
Feb 06 Javascript
JS如何判断是否为ie浏览器的方法(包括IE10、IE11在内)
Dec 13 Javascript
javascript构造函数以及原型对象的理解
Jan 13 Javascript
为你的微信小程序体积瘦身详解
May 20 Javascript
JS自动生成动态HTML验证码页面
Jun 14 Javascript
jQuery实现动态加载(按需加载)javascript文件的方法分析
May 31 jQuery
微信小程序实现拍照画布指定区域生成图片
Jul 18 Javascript
layer弹出层显示在top顶层的方法
Sep 11 Javascript
AngularJS动态生成select下拉框的方法实例
Nov 17 Javascript
如何通过JS实现转码与解码
Feb 21 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
造就帕卡马拉的帕卡斯是怎么被发现的
2021/03/03 咖啡文化
PHP 创建标签云函数代码
2010/05/26 PHP
PHP 实现explort() 功能的详解
2013/06/20 PHP
PHP中数组的分组排序实例
2014/06/01 PHP
Centos下升级php5.2到php5.4全记录(编译安装)
2015/04/03 PHP
php实现随机生成易于记忆的密码
2015/06/19 PHP
ThinkPHP5框架实现简单的批量查询功能示例
2018/06/07 PHP
学习ExtJS fit布局使用说明
2009/10/08 Javascript
解析js原生方法创建表格效率测试
2013/07/08 Javascript
利用div+jquery自定义滚动条样式的2种方法
2013/07/18 Javascript
javascript实现复制与粘贴操作实例
2014/10/16 Javascript
JavaScript中指定函数名称的相关方法
2015/06/04 Javascript
js插件Jcrop自定义截取图片功能
2016/10/14 Javascript
JavaScript 动态三角函数实例详解
2017/01/08 Javascript
微信小程序 页面之间传参实例详解
2017/01/13 Javascript
基于Angular.js实现的触摸滑动动画实例代码
2017/02/19 Javascript
详解NodeJS框架express的路径映射(路由)功能及控制
2017/03/24 NodeJs
js截取字符串功能的实现方法
2017/09/27 Javascript
vue实现双向绑定和依赖收集遇到的坑
2018/11/29 Javascript
layer父页获取弹出层输入框里面的值方法
2019/09/02 Javascript
基于form-data请求格式详解
2019/10/29 Javascript
详解Python中的日志模块logging
2015/06/19 Python
详解Python编程中time模块的使用
2015/11/20 Python
解决python opencv无法显示图片的问题
2018/10/28 Python
python 监听salt job状态,并任务数据推送到redis中的方法
2019/01/14 Python
python实现多层感知器
2019/01/18 Python
Django调用百度AI接口实现人脸注册登录代码实例
2020/04/23 Python
python将数据插入数据库的代码分享
2020/08/16 Python
美国羊皮公司:Overland
2018/01/15 全球购物
Banana Republic欧盟:美国都市简约风格的代表品牌
2018/05/09 全球购物
Vans澳大利亚官网:购买鞋子、服装及配件
2019/09/05 全球购物
俄罗斯Sportmarket体育在线商店:用于旅游和户外活动
2019/11/12 全球购物
如何执行一个shell程序
2012/11/23 面试题
美德好少年主要事迹
2014/01/29 职场文书
亲子拓展活动方案
2014/02/20 职场文书
舞蹈兴趣小组活动总结
2014/07/07 职场文书