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.pagination.js 无刷新分页实现步骤分享
May 23 Javascript
超级给力的JavaScript的React框架入门教程
Jul 02 Javascript
js实现类似菜单风格的TAB选项卡效果代码
Aug 28 Javascript
jquery读写cookie操作实例分析
Dec 24 Javascript
jQuery使用DataTable实现删除数据后重新加载功能
Feb 27 Javascript
easyui-datagrid特殊字符不能显示的处理方法
Apr 12 Javascript
AngularJS的ng-click传参的方法
Jun 19 Javascript
javascript字体颜色控件的开发 JS实现字体控制
Nov 27 Javascript
微信小程序checkbox组件使用详解
Jan 31 Javascript
mpvue+vant app搭建微信小程序的方法步骤
Feb 11 Javascript
js事件触发操作实例分析
Jun 21 Javascript
原生js实现针对Dom节点的CRUD操作示例
Aug 26 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中的正规表达式(一)
2006/10/09 PHP
php adodb介绍
2009/03/19 PHP
PHP+MYSQL实现用户的增删改查
2015/03/24 PHP
详解配置 Apache 服务器支持 PHP 文件的解析
2017/02/15 PHP
PHP在弹框中获取foreach中遍历的id值并传递给地址栏
2017/06/13 PHP
PHP实现的权重算法示例【可用于游戏根据权限来随机物品】
2019/02/15 PHP
jquery 框架使用教程 AJAX篇
2009/10/11 Javascript
JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式(六)
2012/04/07 Javascript
Jquery如何实现点击时高亮显示代码
2014/01/22 Javascript
javascript函数中参数传递问题示例探讨
2014/07/31 Javascript
基于jQuery实现的旋转彩圈实例
2015/06/26 Javascript
js贪吃蛇网页版游戏特效代码分享(挑战十关)
2015/08/24 Javascript
js判断鼠标位置是否在某个div中的方法
2016/02/26 Javascript
Bootstrap所支持的表单控件实例详解
2016/05/16 Javascript
实例讲解jQuery中对事件的命名空间的运用
2016/05/24 Javascript
javascript实现文件拖拽事件
2018/03/29 Javascript
vue实现前台列表数据过滤搜索、分页效果
2019/05/28 Javascript
JS数组中对象去重操作示例
2019/06/04 Javascript
Node4-5静态资源服务器实战以及优化压缩文件实例内容
2019/08/29 Javascript
javascript 关于赋值、浅拷贝、深拷贝的个人理解
2019/11/01 Javascript
Laravel 如何在blade文件中使用Vue组件的示例代码
2020/06/28 Javascript
vue使用require.context实现动态注册路由
2020/12/25 Vue.js
python实现监控linux性能及进程消耗性能的方法
2014/07/25 Python
ubuntu系统下使用pm2设置nodejs开机自启动的方法
2018/05/12 NodeJs
检测tensorflow是否使用gpu进行计算的方式
2020/02/03 Python
使用CSS3来制作消息提醒框
2015/07/12 HTML / CSS
Exoticca英国:以最优惠的价格提供豪华异国情调旅行
2018/10/18 全球购物
中国文明网签名寄语
2014/01/18 职场文书
家庭教育先进个人事迹材料
2014/01/24 职场文书
办公室文员自荐书
2014/02/03 职场文书
新闻学专业个人求职信写作
2014/02/04 职场文书
员工拓展培训方案
2014/02/15 职场文书
大学生优秀班干部事迹材料
2014/05/26 职场文书
中考学习决心书
2015/02/04 职场文书
高中运动会前导词
2015/07/20 职场文书
SQLServer中exists和except用法介绍
2021/12/04 SQL Server