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 相关文章推荐
去除链接虚线全面分析总结
Aug 15 Javascript
javascript学习网址备忘
May 29 Javascript
JavaScript高级程序设计(第3版)学习笔记7 js函数(上)
Oct 11 Javascript
JavaScript常用全局属性与方法记录积累
Jul 03 Javascript
jquery监听div内容的变化具体实现思路
Nov 04 Javascript
jQuery经过一段时间自动隐藏指定元素的方法
Mar 17 Javascript
自定义事件解决重复请求BUG的问题
Jul 11 Javascript
一步步教会你微信小程序的登录鉴权
Apr 09 Javascript
vue页面切换过渡transition效果
Oct 08 Javascript
详解Angular Forms中自定义ngModel绑定值的方式
Dec 10 Javascript
JS实现水平移动与垂直移动动画
Dec 19 Javascript
微信小程序实现滑动操作代码
Apr 23 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
关于BIG5-HKSCS的解决方法
2007/03/20 PHP
php 微信开发获取用户信息如何实现
2016/12/13 PHP
基于jquery的关于动态创建DOM元素的问题
2010/12/24 Javascript
基于jquery中children()与find()的区别介绍
2013/04/26 Javascript
浅析JQuery中的html(),text(),val()区别
2014/09/01 Javascript
jQuery实现仿Alipay支付宝首页全屏焦点图切换特效
2015/05/04 Javascript
jQuery操作DOM_动力节点Java学院整理
2017/07/04 jQuery
JavaScript贪吃蛇小组件实例代码
2017/08/20 Javascript
微信小程序 按钮滑动的实现方法
2017/09/27 Javascript
基于JavaScript表单脚本(详解)
2017/10/18 Javascript
深入理解vue中slot与slot-scope的具体使用
2018/01/26 Javascript
Node.js readline 逐行读取、写入文件内容的示例
2018/03/01 Javascript
详解基于mpvue的小程序markdown适配解决方案
2018/05/08 Javascript
javascript实现文本框标签验证的实例代码
2018/10/14 Javascript
vue实现移动端拖动排序
2020/08/21 Javascript
决策树的python实现方法
2014/11/18 Python
介绍Python中的__future__模块
2015/04/27 Python
Python实现模拟时钟代码推荐
2015/11/08 Python
基于Python 的进程管理工具supervisor使用指南
2016/09/18 Python
详解Python中for循环是如何工作的
2017/06/30 Python
详解python eval函数的妙用
2017/11/16 Python
tensorflow实现简单逻辑回归
2018/09/07 Python
Tesserocr库的正确安装方式
2018/10/19 Python
Django框架HttpRequest对象用法实例分析
2019/11/01 Python
如何在Django中使用聚合的实现示例
2020/03/23 Python
详解python datetime模块
2020/08/17 Python
Django Model层F,Q对象和聚合函数原理解析
2020/11/12 Python
丝芙兰加拿大官方网站:SEPHORA加拿大
2018/11/20 全球购物
Tom Dixon官网:英国照明及家具设计和制造公司
2019/03/01 全球购物
数控专业大学生的自我鉴定
2013/11/13 职场文书
幸福家庭事迹材料
2014/02/03 职场文书
产品发布会策划方案
2014/05/12 职场文书
2014年机关党委工作总结
2014/12/11 职场文书
大学推普周活动总结
2015/05/07 职场文书
pytorch Dropout过拟合的操作
2021/05/27 Python
带你了解Java中的ForkJoin
2022/04/28 Java/Android