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 相关文章推荐
取得一定长度的内容,处理中文
Dec 20 Javascript
javascript RadioButtonList获取选中值
Apr 09 Javascript
fancybox1.3.1 基于Jquery的插件在IE中图片显示问题
Oct 01 Javascript
js 控制页面跳转的5种方法
Sep 09 Javascript
Firefox下无法正常显示年份的解决方法
Sep 04 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
Sep 12 Javascript
JS实现的打字机效果完整实例
Jun 20 Javascript
angular.JS实现网页禁用调试、复制和剪切
Mar 31 Javascript
基于javaScript的this指向总结
Jul 22 Javascript
使用mint-ui开发项目的一些心得(分享)
Sep 07 Javascript
webpack打包非模块化js的方法
Oct 24 Javascript
vue的hash值原理也是table切换实例代码
Dec 14 Vue.js
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 MYSQL 数据备份类
2009/06/19 PHP
php中关于codeigniter的xmlrpc的类在进行数据交换时的类型问题
2011/07/03 PHP
深入PHP empty(),isset(),is_null()的实例测试详解
2013/06/06 PHP
一个PHP的远程图片抓取函数分享
2013/09/25 PHP
THinkPHP获取客户端IP与IP地址查询的方法
2016/11/14 PHP
php图形jpgraph操作实例分析
2017/02/22 PHP
jquery $.each()使用探讨
2013/09/23 Javascript
window.open 以post方式传递参数示例代码
2014/02/27 Javascript
jquery制作弹窗提示窗口代码分享
2014/03/02 Javascript
JavaScript中对象属性的添加和删除示例
2014/05/12 Javascript
Express作者TJ告别Node.js奔向Go
2014/07/14 Javascript
JavaScript window.location对象
2014/11/14 Javascript
node.js中的console.error方法使用说明
2014/12/10 Javascript
javascript面向对象之对象的深入理解
2015/01/13 Javascript
js实现黑色简易的滑动门网页tab选项卡效果
2015/08/31 Javascript
JS+CSS实现六级网站导航主菜单效果
2015/09/28 Javascript
jquery实现简易的移动端验证表单
2015/11/08 Javascript
jQuery插件datatables使用教程
2016/04/21 Javascript
Angular CLI 安装和使用教程
2017/09/13 Javascript
基于webpack-hot-middleware热加载相关错误的解决方法
2018/02/22 Javascript
JS与CSS3实现图片响应鼠标移动放大效果示例
2018/05/04 Javascript
在vue中v-bind使用三目运算符绑定class的实例
2018/09/29 Javascript
react antd表格中渲染一张或多张图片的实例
2020/10/28 Javascript
在vant 中使用cell组件 定义图标该图片和位置操作
2020/11/02 Javascript
Python使用剪切板的方法
2017/06/06 Python
PyCharm代码整体缩进,反向缩进的方法
2018/06/25 Python
详解Python3中的迭代器和生成器及其区别
2018/10/09 Python
matplotlib.pyplot绘图显示控制方法
2019/01/15 Python
浅谈python3中input输入的使用
2019/08/02 Python
分享一个pycharm专业版安装的永久使用方法
2019/09/24 Python
简述Linux文件系统通过i节点把文件的逻辑结构和物理结构转换的工作过程
2016/01/06 面试题
院药学专业个人求职信
2013/09/21 职场文书
大学毕业登记表自我鉴定
2013/10/09 职场文书
八荣八耻演讲稿
2014/09/15 职场文书
老乡聚会通知
2015/04/23 职场文书
MySQL数据库简介与基本操作
2022/05/30 MySQL