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 相关文章推荐
收集的网上用的ajax之chat.js文件
Apr 08 Javascript
javascript 冒号 使用说明
Jun 06 Javascript
YUI的Tab切换实现代码
Apr 11 Javascript
jquery之empty()与remove()区别说明
Sep 10 Javascript
表单元素的submit()方法和onsubmit事件应用概述
Feb 01 Javascript
javascript调试之DOM断点调试法使用技巧分享
Apr 15 Javascript
JavaScript实现的图像模糊算法代码分享
Apr 22 Javascript
如何实现JavaScript动态加载CSS和JS文件
Dec 28 Javascript
js 两数组去除重复数值的实例
Dec 06 Javascript
详解React+Koa实现服务端渲染(SSR)
May 23 Javascript
jQuery子选择器与可见性选择器实例分析
Jun 28 jQuery
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
Sep 10 jQuery
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 缩略图实现函数代码
2011/06/23 PHP
PHP缩略图生成和图片水印制作
2017/01/07 PHP
HR vs CL BO3 第二场 2.13
2021/03/10 DOTA
解析jQuery与其它js(Prototype)库兼容共存
2013/07/04 Javascript
javascript ajax 仿百度分页函数
2013/10/29 Javascript
javascript获取鼠标点击元素对象(示例代码)
2013/12/20 Javascript
JS将数字转换成三位逗号分隔的样式(示例代码)
2014/02/19 Javascript
用于deeplink的js方法(判断手机是否安装app)
2014/04/02 Javascript
SyntaxHighlighter 3.0.83使用笔记
2015/01/26 Javascript
jQuery+ajax实现动态执行脚本的方法
2015/01/27 Javascript
浅析jquery数组删除指定元素的方法:grep()
2016/05/19 Javascript
jQuery监听文件上传实现进度条效果的方法
2016/10/16 Javascript
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
2017/04/02 jQuery
几种响应式文字详解
2017/05/19 Javascript
Vue项目webpack打包部署到服务器的实例详解
2017/07/17 Javascript
解决Vue+Electron下Vuex的Dispatch没有效果问题
2019/05/20 Javascript
ES6常用小技巧总结【去重、交换、合并、反转、迭代、计算等】
2019/12/21 Javascript
vue过滤器实现日期格式化的案例分析
2020/07/02 Javascript
[26:21]浴火之凤-TI4世界冠军Newbee战队纪录片
2014/08/07 DOTA
python xml解析实例详解
2016/11/14 Python
python调用pyaudio使用麦克风录制wav声音文件的教程
2019/06/26 Python
浅谈Python中(&,|)和(and,or)之间的区别
2019/08/07 Python
Python 单例设计模式用法实例分析
2019/09/23 Python
python 实现读取csv数据,分类求和 再写进 csv
2020/05/18 Python
python 多线程爬取壁纸网站的示例
2021/02/20 Python
Myholidays美国:在线旅游网站
2019/08/16 全球购物
英语专业大学生求职简历的自我评价
2013/10/18 职场文书
揠苗助长教学反思
2014/02/04 职场文书
签约仪式主持词
2014/03/19 职场文书
个人工作主要事迹
2014/05/08 职场文书
做一个有道德的人活动方案
2014/08/25 职场文书
2015年教师党员自我评价材料
2015/03/04 职场文书
校园新闻稿范文
2015/07/18 职场文书
结婚纪念日感言
2015/08/01 职场文书
python glom模块的使用简介
2021/04/13 Python
服务器nginx权限被拒绝解决案例
2022/09/23 Servers