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 遍历json数组的实现代码
Sep 22 Javascript
asp.net+jquery滚动滚动条加载数据的下拉控件
Jun 25 Javascript
myFocus slide3D v1.1.0 使用方法与下载
Jan 12 Javascript
js不能跳转到上一页面的问题解决方法
Mar 01 Javascript
与Math.pow 相反的函数使用介绍
Aug 04 Javascript
JavaScript中的单引号和双引号报错的解决方法
Sep 01 Javascript
Javascript中innerHTML用法实例分析
Jan 12 Javascript
javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法
May 14 Javascript
JS前端开发判断是否是手机端并跳转操作(小结)
Feb 05 Javascript
详解javascript 正则表达式之分组与前瞻匹配
May 30 Javascript
通过GASP让vue实现动态效果实例代码详解
Nov 24 Javascript
jquery向后台提交数组的代码分析
Feb 20 jQuery
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数组交集的优化代码分析
2011/03/06 PHP
php函数间的参数传递(值传递/引用传递)
2013/09/23 PHP
PHP框架Laravel插件Pagination实现自定义分页
2020/04/22 PHP
ThinkPHP实现更新数据实例详解(demo)
2016/06/29 PHP
PHP-FPM 的管理和配置详解
2019/02/17 PHP
网页javascript精华代码集
2007/01/24 Javascript
使用Post提交时须将空格转换成加号的解释
2013/01/14 Javascript
javascript的数组和常用函数详解
2014/05/09 Javascript
流量统计器如何鉴别C#:WebBrowser中伪造referer
2015/01/07 Javascript
javascript密码强度校验代码(两种方法)
2015/08/10 Javascript
3种不同的ContextMenu右键菜单实现代码
2016/11/03 Javascript
在小程序中使用腾讯视频插件播放教程视频的方法
2018/07/10 Javascript
vue-music 使用better-scroll遇到轮播图不能自动轮播问题
2018/12/03 Javascript
Vue的属性、方法、生命周期实例代码详解
2019/09/17 Javascript
JQuery中的常用事件、对象属性与使用方法分析
2019/12/23 jQuery
vue路由缓存的几种实现方式小结
2020/02/02 Javascript
[01:22:28]DOTA2-DPC中国联赛 正赛 SAG vs RNG BO3 第一场 1月18日
2021/03/11 DOTA
python查找目录下指定扩展名的文件实例
2015/04/01 Python
简单介绍Python的Tornado框架中的协程异步实现原理
2015/04/23 Python
使用PDB简单调试Python程序简明指南
2015/04/25 Python
python中list列表的高级函数
2016/05/17 Python
Python入门教程之运算符与控制流
2016/08/17 Python
Django使用httpresponse返回用户头像实例代码
2018/01/26 Python
python实现对指定输入的字符串逆序输出的6种方法
2018/04/26 Python
python集合的创建、添加及删除操作示例
2019/10/08 Python
Python函数式编程实例详解
2020/01/17 Python
VSCODE配置Markdown及Markdown基础语法详解
2021/01/19 Python
char型变量中能不能存贮一个中文汉字
2015/07/08 面试题
颁奖典礼主持词
2014/03/25 职场文书
房屋维修协议书范本
2014/09/25 职场文书
2014购房个人委托书范本
2014/10/12 职场文书
体育教师个人工作总结
2015/02/09 职场文书
浅谈克隆 JavaScript
2021/11/02 Javascript
python中数组和列表的简单实例
2022/03/25 Python
关于JS中的作用域中的问题思考分享
2022/04/06 Javascript
3050和2060哪个好 性能差多少 差距有多大 谁更有性价比
2022/06/17 数码科技