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控制图片的hover效果(smartRollover.js)
Mar 18 Javascript
Javascript和HTML5利用canvas构建Web五子棋游戏实现算法
Jul 17 Javascript
Jquery响应回车键直接提交表单操作代码
Jul 25 Javascript
jQuery中DOM操作实例分析
Jan 23 Javascript
js获取内联样式的方法
Jan 27 Javascript
jquery+json实现动态商品内容展示的方法
Jan 14 Javascript
原生js实现鼠标跟随效果
Feb 28 Javascript
Web前端框架Angular4.0.0 正式版发布
Mar 28 Javascript
jquery dataTable 获取某行数据
May 05 jQuery
js截取字符串功能的实现方法
Sep 27 Javascript
10分钟彻底搞懂Http的强制缓存和协商缓存(小结)
Aug 30 Javascript
在Vue中使用this.$store或者是$route一直报错的解决
Nov 08 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代码包装修正版
2008/03/15 PHP
PHP学习笔记 (1) 环境配置与代码调试
2011/06/19 PHP
Zend Framework框架教程之Zend_Db_Table_Rowset用法实例分析
2016/03/21 PHP
PHP针对多用户实现更换头像功能
2016/09/04 PHP
用JavaScript玩转游戏物理(一)运动学模拟与粒子系统
2010/06/19 Javascript
关于捕获用户何时点击window.onbeforeunload的取消事件
2011/03/06 Javascript
怎样在JavaScript里写一个swing把数据插入数据库
2012/12/10 Javascript
javaScript使用EL表达式的几种方式
2014/05/27 Javascript
一个不错的字符串转码解码函数(自写)
2014/07/31 Javascript
基于BootStrap环境写jQuery tabs插件
2016/07/12 Javascript
AngularJS包括详解及示例代码
2016/08/17 Javascript
JS实现点击链接切换显示隐藏内容的方法
2017/10/19 Javascript
mint-ui的search组件在键盘显示搜索按钮的实现方法
2017/10/27 Javascript
jQuery三组基本动画与自定义动画操作实例总结
2020/05/09 jQuery
你不知道的SpringBoot与Vue部署解决方案
2020/11/09 Javascript
Js实现粘贴上传图片的原理及示例
2020/12/09 Javascript
在Python中操作文件之seek()方法的使用教程
2015/05/24 Python
Python 装饰器深入理解
2017/03/16 Python
Python 专题五 列表基础知识(二维list排序、获取下标和处理txt文本实例)
2017/03/20 Python
python实现简单的文字识别
2018/11/27 Python
解决pycharm最左侧Tool Buttons显示不全的问题
2019/12/17 Python
Pycharm激活方法及详细教程(详细且实用)
2020/05/12 Python
解决python pandas读取excel中多个不同sheet表格存在的问题
2020/07/14 Python
美国大城市最热门旅游景点门票:CityPASS
2016/12/16 全球购物
三星美国官网:Samsung美国
2017/02/06 全球购物
联想澳大利亚官网:Lenovo Australia
2018/01/18 全球购物
新闻专业个人自我评价
2013/09/21 职场文书
银行门卫岗位职责
2013/12/29 职场文书
留学生求职信
2014/06/03 职场文书
安全标语大全
2014/06/10 职场文书
房屋授权委托书范本
2014/10/07 职场文书
讲座通知范文
2015/04/23 职场文书
nginx配置proxy_pass中url末尾带/与不带/的区别详解
2021/03/31 Servers
Python使用Kubernetes API访问集群
2021/05/30 Python
eval(cmd)与eval($cmd)的区别与联系
2021/07/07 PHP
JS轻量级函数式编程实现XDM三
2022/06/16 Javascript