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与JSon实现的无刷新分页代码
Sep 13 Javascript
Jquery中的层次选择器与find()的区别示例介绍
Feb 20 Javascript
使用原生js写的一个简单slider
Apr 29 Javascript
使用jquery组件qrcode生成二维码及应用指南
Feb 22 Javascript
使用JQuery实现的分页插件分享
Nov 05 Javascript
理解javascript中DOM事件
Dec 25 Javascript
jQuery Html控件基本操作(日常收集整理)
Mar 11 Javascript
jQuery.Uploadify插件实现带进度条的批量上传功能
Jun 08 Javascript
jQuery实现导航高亮的方法【附demo源码下载】
Nov 09 Javascript
微信小程序自定义组件封装及父子间组件传值的方法
Aug 28 Javascript
详解vue中移动端自适应方案
May 05 Javascript
微信小程序云开发之使用云存储
May 17 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
CodeIgniter框架中_remap()使用方法2例
2014/03/10 PHP
PHP定时执行任务实现方法详解(Timer)
2015/07/30 PHP
php使用curl详细解析及问题汇总
2016/08/11 PHP
PHP设计模式之适配器模式(Adapter)原理与用法详解
2019/12/12 PHP
Javascript isArray 数组类型检测函数
2009/10/08 Javascript
jQuery 类twitter的文本字数限制带提示效果插件
2010/04/16 Javascript
一个基于jquery的文本框记数器
2012/09/19 Javascript
jquery批量控制form禁用的代码
2013/08/06 Javascript
Jquery性能优化详解
2014/05/15 Javascript
JavaScript使用Math.Min返回两个数中较小数的方法
2015/04/06 Javascript
深入学习JavaScript中的Rest参数和参数默认值
2015/07/28 Javascript
jQuery实现右下角可缩放大小的层完整实例
2016/06/20 Javascript
js复制内容到剪贴板代码,js复制代码的简单实例
2016/10/27 Javascript
Angular.JS中指令ng-if的注意事项小结
2017/06/21 Javascript
JavaScript同源策略和跨域访问实例详解
2018/04/03 Javascript
Vue.js点击切换按钮改变内容的实例讲解
2018/08/22 Javascript
微信小程序生成分享海报方法(附带二维码生成)
2019/03/29 Javascript
Echarts实现多条折线可拖拽效果
2019/12/19 Javascript
[22:07]DOTA2-DPC中国联赛 正赛 iG vs Magma 选手采访
2021/03/11 DOTA
Python批量修改文件后缀的方法
2014/01/26 Python
Python的ORM框架SQLAlchemy入门教程
2014/04/28 Python
python根据出生年份简单计算生肖的方法
2015/03/27 Python
Python实现自定义函数的5种常见形式分析
2018/06/16 Python
python实现自动网页截图并裁剪图片
2018/07/30 Python
selenium获取当前页面的url、源码、title的方法
2019/06/12 Python
Python人工智能之路 jieba gensim 最好别分家之最简单的相似度实现
2019/08/13 Python
python 多维高斯分布数据生成方式
2019/12/09 Python
Python实现银行账户资金交易管理系统
2020/01/03 Python
Python selenium抓取虎牙短视频代码实例
2020/03/02 Python
快速一键生成Python爬虫请求头
2021/03/04 Python
天巡全球:Skyscanner Global
2017/06/20 全球购物
澳大利亚运动鞋零售商:The Athlete’s Foot
2018/11/04 全球购物
2014年五一活动策划方案
2014/03/15 职场文书
结婚通知短信怎么写
2015/04/17 职场文书
2015婚礼主持词开场白
2015/05/28 职场文书
2016党员读书思廉心得体会
2016/01/23 职场文书