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 相关文章推荐
Node.js中require的工作原理浅析
Jun 24 Javascript
jQuery复制表单元素附源码分享效果演示
Sep 30 Javascript
JSON 对象未定义错误的解决方法
Sep 29 Javascript
Node.js 数据加密传输浅析
Nov 16 Javascript
javascript实现用户点击数量统计
Dec 25 Javascript
提高JavaScript执行效率的23个实用技巧
Mar 01 Javascript
Vue项目中引入外部文件的方法(css、js、less)
Jul 24 Javascript
Angular4学习笔记之根模块与Ng模块
Sep 09 Javascript
Vue写一个简单的倒计时按钮功能
Apr 20 Javascript
layui-select动态选中值的例子
Sep 23 Javascript
Node.js API详解之 string_decoder用法实例分析
Apr 29 Javascript
Element Backtop回到顶部的具体使用
Jul 27 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和XSL stylesheets转换XML文档
2006/10/09 PHP
linux下 C语言对 php 扩展
2008/12/14 PHP
制作安全性高的PHP网站的几个实用要点
2014/12/30 PHP
ThinkPHP框架安全实现分析
2016/03/14 PHP
PHP+MySql实现一个简单的留言板
2020/07/19 PHP
popdiv
2006/07/14 Javascript
jQuery 拖动层(在可视区域范围内)
2012/05/24 Javascript
js控制容器隐藏出现防止样式变化的两种方法
2014/04/25 Javascript
javascript的push使用指南
2014/12/05 Javascript
javascript实现画不相交的圆
2015/04/07 Javascript
jQuery实现判断滚动条到底部
2015/06/23 Javascript
jQuery电话号码验证实例
2017/01/05 Javascript
JavaScript数据结构学习之数组、栈与队列
2017/05/02 Javascript
小发现之浅谈location.search与location.hash的问题
2017/06/23 Javascript
基于EasyUI的基础之上实现树形功能菜单
2017/06/28 Javascript
在vscode里使用.vue代码模板的方法
2018/04/28 Javascript
Vue2.5学习笔记之如何在项目中使用和配置Vue
2018/09/26 Javascript
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
2018/11/28 Javascript
js实现验证码干扰(静态)
2021/02/22 Javascript
[00:35]DOTA2上海特级锦标赛 VP战队宣传片
2016/03/04 DOTA
[33:15]2018DOTA2亚洲邀请赛3月30日 小组赛B组 VP VS Mineski
2018/03/31 DOTA
如何用Python合并lmdb文件
2018/07/02 Python
python生成1行四列全2矩阵的方法
2018/08/04 Python
python如何实现代码检查
2019/06/28 Python
python使用梯度下降和牛顿法寻找Rosenbrock函数最小值实例
2020/04/02 Python
python接口自动化之ConfigParser配置文件的使用详解
2020/08/03 Python
美国最大的袜子制造商和零售商:Renfro Socks
2017/09/03 全球购物
幼儿园安全检查制度
2014/01/30 职场文书
师说教学反思
2014/02/07 职场文书
进口业务员岗位职责
2014/04/06 职场文书
优秀团员事迹材料1500字
2014/08/31 职场文书
"9.18"国耻日演讲稿范文
2014/09/14 职场文书
工作失职自我检讨书
2015/05/05 职场文书
浅谈node.js中间件有哪些类型
2021/04/29 Javascript
javascript的var与let,const之间的区别详解
2022/02/18 Javascript
SpringBoot全局异常处理方案分享
2022/05/25 Java/Android