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 相关文章推荐
索趣科技的答案
Feb 07 Javascript
用Javascript实现Sleep暂停功能代码
Sep 03 Javascript
jQuery实现表格展开与折叠的方法
May 04 Javascript
JavaScript判断数字是否为质数的方法汇总
Jun 02 Javascript
jQuery+ajax实现实用的点赞插件代码
Jul 06 Javascript
swiper插件自定义切换箭头按钮
Dec 28 Javascript
使用百度地图实现地图网格的示例
Feb 06 Javascript
在vue组件中使用axios的方法
Mar 16 Javascript
angularJs select绑定的model取不到值的解决方法
Oct 08 Javascript
大转盘抽奖小程序版 转盘抽奖网页版
Apr 16 Javascript
js的Object.assign用法示例分析
Mar 05 Javascript
Angular8 简单表单验证的实现示例
Jun 03 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 is_file 判断给定文件名是否为一个正常的文件
2010/05/10 PHP
PHP使用pear自带的mail类库发邮件的方法
2015/07/08 PHP
总结对比php中的多种序列化
2016/08/28 PHP
php实现的二分查找算法示例
2017/06/20 PHP
php curl发送请求实例方法
2019/08/01 PHP
监控 url fragment变化的js代码
2010/04/19 Javascript
一个封装js代码-----展开收起效果示例
2013/07/03 Javascript
HTML页面弹出居中可拖拽的自定义窗口层
2014/05/07 Javascript
优化Node.js Web应用运行速度的10个技巧
2014/09/03 Javascript
使用js画图之圆、弧、扇形
2015/01/12 Javascript
ECMAScript6中Set/WeakSet详解
2015/06/12 Javascript
JS使用eval解析JSON的注意事项分析
2015/11/14 Javascript
BootStrap使用popover插件实现鼠标经过显示并保持显示框
2016/06/23 Javascript
JS 对java返回的json格式的数据处理方法
2016/12/05 Javascript
vue中组件通信的八种方式(值得收藏!)
2019/08/09 Javascript
[01:31]DOTA2上海特级锦标赛 SECRET战队完整宣传片
2016/03/16 DOTA
使用IPython下的Net-SNMP来管理类UNIX系统的教程
2015/04/15 Python
Python实现的简单hangman游戏实例
2015/06/28 Python
python3 破解 geetest(极验)的滑块验证码功能
2018/02/24 Python
python实现在图片上画特定大小角度矩形框
2018/10/24 Python
python去重,一个由dict组成的list的去重示例
2019/01/21 Python
详解numpy的argmax的具体使用
2019/05/27 Python
PyCharm 2019.3发布增加了新功能一览
2019/12/08 Python
keras 简单 lstm实例(基于one-hot编码)
2020/07/02 Python
HTML5 本地存储之如果没有数据库究竟会怎样
2013/04/25 HTML / CSS
电气工程及其自动化自我评价四篇
2013/09/24 职场文书
大学生物业管理求职信
2013/10/24 职场文书
大学生毕业的自我鉴定
2013/11/13 职场文书
手术室护士长竞聘书
2014/03/31 职场文书
院党委组织查摆问题对照检查材料思想汇报2014
2014/10/08 职场文书
2014年安全生产工作总结
2014/11/13 职场文书
担保书范本
2015/01/20 职场文书
高中生思想道德自我评价
2015/03/09 职场文书
亮剑精神观后感
2015/06/05 职场文书
2015年挂职锻炼个人总结
2015/10/22 职场文书
win7配置本地ftp服务器的图文教程
2022/08/05 Servers