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 相关文章推荐
重定向实现代码
Nov 20 Javascript
js实现简单模态窗口,背景灰显
Nov 14 Javascript
javascript设计模式之Adapter模式【适配器模式】实现方法示例
Jan 13 Javascript
jQuery中table数据的值拷贝和拆分
Mar 19 Javascript
javascript实现动态显示颜色块的报表效果
Apr 10 Javascript
微信小程序 ES6Promise.all批量上传文件实现代码
Apr 14 Javascript
vue.js中过滤器的使用教程
Jun 08 Javascript
jQuery Collapse1.1.0折叠插件简单使用
Aug 28 jQuery
javascript移动端 电子书 翻页效果实现代码
Sep 07 Javascript
js实现简单的日历显示效果函数示例
Nov 25 Javascript
基于JavaScript实现十五拼图代码实例
Apr 26 Javascript
基于postman获取动态数据过程详解
Sep 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的Yii框架中的event事件机制
2016/03/17 PHP
javascript+dom树型菜单类,希望朋友们一起进步
2007/05/03 Javascript
javascript 获取图片颜色
2009/04/05 Javascript
Jquery CheckBox全选方法代码附js checkbox全选反选代码
2010/06/09 Javascript
javascript实现图片自动和可控的轮播切换特效
2015/04/13 Javascript
JavaScript判断表单中多选框checkbox选中个数的方法
2015/08/17 Javascript
如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上
2015/12/26 Javascript
javascript表单事件处理方法详解
2016/05/15 Javascript
jQuery实现隔行变色的方法分析(对比原生JS)
2016/11/18 Javascript
网站发布后Bootstrap框架引用woff字体无法正常显示的解决方法
2016/11/24 Javascript
JS定时器实现数值从0到10来回变化
2016/12/09 Javascript
浅析JavaScript中var that=this
2017/02/17 Javascript
JS实现用特殊符号替换字符串的中间部分区域的实例代码
2018/07/24 Javascript
vuex的module模块用法示例
2018/11/12 Javascript
Vue.js 中的 v-cloak 指令及使用详解
2018/11/19 Javascript
js 获取本周、上周、本月、上月、本季度、上季度的开始结束日期
2020/02/01 Javascript
vue使用微信扫一扫功能的实现代码
2020/04/11 Javascript
通过代码实例展示Python中列表生成式的用法
2015/03/31 Python
python去除文件中空格、Tab及回车的方法
2016/04/12 Python
Python随机生成均匀分布在单位圆内的点代码示例
2017/11/13 Python
详解Python 函数如何重载?
2019/04/23 Python
python检测服务器端口代码实例
2019/08/31 Python
查找适用于matplotlib的中文字体名称与实际文件名对应关系的方法
2021/01/05 Python
解决CSS3的opacity属性带来的层叠顺序问题
2016/05/09 HTML / CSS
美国台面电器和厨具品牌:KitchenAid
2019/04/12 全球购物
美国新娘礼品店:The Paisley Box
2020/09/08 全球购物
全球精选男装和家居用品:Article
2020/04/13 全球购物
什么是抽象
2015/12/13 面试题
高级文秘工作总结的自我评价
2013/09/28 职场文书
个人简历自我评价范文
2014/02/04 职场文书
2014年党务公开方案
2014/05/08 职场文书
物业总经理助理岗位职责
2014/06/29 职场文书
小学清明节活动总结
2014/07/04 职场文书
开学典礼观后感
2015/06/15 职场文书
张丽莉事迹观后感
2015/06/16 职场文书
教师节座谈会主持词
2015/07/03 职场文书