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 相关文章推荐
jQuery Tools tooltip使用说明
Jul 14 Javascript
jquery validate在ie8下的bug解决方法
Nov 13 Javascript
javascript模拟实现C# String.format函数功能代码
Nov 25 Javascript
jQuery实现单击和鼠标感应事件
Feb 01 Javascript
Javascript设计模式之观察者模式的多个实现版本实例
Mar 03 Javascript
JavaScript黑洞数字之运算路线查找算法(递归算法)实例
Jan 28 Javascript
js实现密码强度检验
Jan 15 Javascript
利用jqprint插件打印页面内容的实现方法
Jan 09 Javascript
Less 安装及基本用法
May 05 Javascript
Vue 实现从文件中获取文本信息的方法详解
Oct 16 Javascript
JS FormData对象使用方法实例详解
Feb 12 Javascript
js动态添加带圆圈序号列表的实例代码
Feb 18 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
php提示无法加载或mcrypt没有找到 PHP 扩展 mbstring解决办法
2012/03/27 PHP
php批量上传的实现代码
2013/06/09 PHP
PHP脚本监控Nginx 502错误并自动重启php-fpm
2015/05/13 PHP
javascript 写类方式之七
2009/07/05 Javascript
JQuery打造PHP的AJAX表单提交实例
2009/11/03 Javascript
JavaScript Scoping and Hoisting 翻译
2012/07/03 Javascript
阻止子元素继承父元素事件具体思路及实现
2013/05/02 Javascript
extjs_02_grid显示本地数据、显示跨域数据
2014/06/23 Javascript
JavaScript字符串对象slice方法入门实例(用于字符串截取)
2014/10/16 Javascript
JavaScript分秒倒计时器实现方法
2015/02/02 Javascript
jQuery数据缓存用法分析
2015/02/20 Javascript
jquery实现实时改变网页字体大小、字体背景色和颜色的方法
2015/08/05 Javascript
跟我学习javascript的prototype,getPrototypeOf和__proto__
2015/11/17 Javascript
Angular2.js实现表单验证详解
2017/06/23 Javascript
史上最全JavaScript常用的简写技巧(推荐)
2017/08/17 Javascript
详解webpack babel的配置
2018/01/09 Javascript
jQuery中将json数据显示到页面表格的方法
2018/05/27 jQuery
js根据json数据中的某一个属性来给数据分组的方法
2018/10/08 Javascript
ES6 Symbol数据类型的应用实例分析
2019/06/26 Javascript
解决layui的使用以及针对select、radio等表单组件不显示的问题
2019/09/05 Javascript
Node 代理访问的实现
2019/09/19 Javascript
vue中选中多个选项并且改变选中的样式的实例代码
2020/09/16 Javascript
python实现QQ批量登录功能
2019/06/19 Python
python修改字典键(key)的方法
2019/08/05 Python
Python函数参数分类原理详解
2020/05/28 Python
Python 如何创建一个线程池
2020/07/28 Python
英国最大的线上保健品零售商之一:Vitamin Planet
2016/12/01 全球购物
龟牌英国商店:Turtle Wax Brand Store UK
2019/07/02 全球购物
销售工作人员的自我评价分享
2013/11/10 职场文书
空中乘务员岗位职责
2014/03/08 职场文书
歌唱比赛主持词
2014/03/18 职场文书
大学生自我鉴定书
2014/03/24 职场文书
个人剖析材料范文
2014/09/30 职场文书
2014年大堂经理工作总结
2014/11/21 职场文书
压缩Redis里的字符串大对象操作
2021/06/23 Redis
mybatis3中@SelectProvider传递参数方式
2021/08/04 Java/Android