jQuery绑定事件不执行但alert后可以正常执行
2023-06-13 09:15:27 时间
因为我不知道怎么描述这个问题,故标题起的这么坑爹
主要过程是这样的,今天我写一个类似于百度知道那样有提问答案的页面,所有的数据都是页面第一次加载时通过ajax得到的
希望实现的效果是提问者可以通过店家每个答案后面的星星符号选择采纳此答案,被采纳的答案星星图标会变成全黑的。
开始我是这样写的
复制代码代码如下:
主要过程是这样的,今天我写一个类似于百度知道那样有提问答案的页面,所有的数据都是页面第一次加载时通过ajax得到的
希望实现的效果是提问者可以通过店家每个答案后面的星星符号选择采纳此答案,被采纳的答案星星图标会变成全黑的。
开始我是这样写的
$(".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,执行对应函数,其余在这个块中的元素发生点击事件则忽略
这样就可以解决动态加载数据中事件绑定的问题
相关文章
- jquery事件delegate()方法用法详解[通俗易懂]
- jQuery中的一些事件以及动画
- 生成二维码的 jQuery 插件:jquery.qrcode.js
- jquery绑定与解绑元素事件
- jquery选择器之属性过滤选择器详解编程语言
- jQuery给动态添加的元素绑定事件的方法详解编程语言
- jquery swiper自定义pagination的方法详解编程语言
- jquery鼠标点击穿透的解决方法详解编程语言
- JQuery添加事件监听详解编程语言
- jQuery next() nextAll()和nextUntil()方法
- JQuery困惑—包装集DOM节点
- jQuery中的常用事件总结
- JQuery引发两次$(document.ready)事件
- jQuery库与其他JS库冲突的解决办法
- JQuery插件模板制作jquery插件的朋友可以参考下
- jQuery源码分析之Event事件分析
- 初窥JQuery(二)事件机制(2)
- 基于jquery的button默认enter事件(回车事件)。
- 排除JQuery通过HttpGet调用WebService返回Json时“parserror”错误
- jquery中dom操作和事件的实例学习仿yahoo邮箱登录框的提示效果
- Jquery为单选框checkbox绑定单击click事件
- Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)
- Jquery事件的连接使用示例
- jquery必须知道的一些常用特效方法及使用示例(整理)
- jquery实现按Enter键触发事件示例
- JQuery中阻止事件冒泡几种方式及其区别介绍
- JQuery+Ajax无刷新分页的实例代码
- JQuery异步加载无限下拉框级联功能实现示例
- jquery文本框中的事件应用以输入邮箱为例
- Jquery图片延迟加载插件jquery.lazyload.js的使用方法
- Jquery对象和Dom对象的区别分析
- JQuery右键菜单插件ContextMenu使用指南
- jquery移动节点实例