当前位置: 首页 > 编程笔记 >

jQuery绑定事件不执行但alert后可以正常执行

农永宁
2023-03-14
本文向大家介绍jQuery绑定事件不执行但alert后可以正常执行,包括了jQuery绑定事件不执行但alert后可以正常执行的使用技巧和注意事项,需要的朋友参考一下
因为我不知道怎么描述这个问题,故标题起的这么坑爹
主要过程是这样的,今天我写一个类似于百度知道那样有提问答案的页面,所有的数据都是页面第一次加载时通过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 on方法绑定事件后执行多次的解决方法,包括了Jquery on方法绑定事件后执行多次的解决方法的使用技巧和注意事项,需要的朋友参考一下 这两天工作中遇到使用js动态加载内容,同时需要对加入的内容绑定点击事件的,当时想想了想可以使用内联的onclick 来实现,后来没有这样做,使用的是 on(‘click',function(){}) ,然而使用on方法的时候就发现,on

  • 本文向大家介绍JQuery给元素绑定click事件多次执行的解决方法,包括了JQuery给元素绑定click事件多次执行的解决方法的使用技巧和注意事项,需要的朋友参考一下 原绑定方法: 这种方法只会在原click方法中继续添加新方法; 解决办法更改绑定方法为: 在绑定新click方法前对元素所绑定的click方法解绑

  • 问题内容: 我有一个Go项目,它使用goose进行Mysql迁移。我想将迁移绑定到程序包可执行文件,以便该可执行文件可以独立于任何系统进行部署和使用,类似于JAVA项目中的JAR文件。 Go可以做到这一点吗? 问题答案: 如何获得一个可以迁移数据库并工作的文件 安装 制作应用。我基于示例并添加选项。假设您的项目位于: 创建用于迁移的文件夹: 创建第一个迁移。我们将使用-style迁移: 您将获得带

  • 问题内容: 我正在尝试确定一个程序/软件,该程序/软件将使我能够有效地提取大量大型CSV文件(总计40+ GB),并输出具有导入到Elasticsearch(ES)所需的特定格式的JSON文件。 jq可以有效地获取如下数据: 按ID进行汇总(这样,多个文件中CSV行中的所有JSON文档都属于一个id条目),输出如下所示: 我用Matlab编写了一个脚本,但由于担心它的执行速度慢得多。我可能需要花费

  • 本文向大家介绍VUE DOM加载后执行自定义事件的方法,包括了VUE DOM加载后执行自定义事件的方法的使用技巧和注意事项,需要的朋友参考一下 最近想用vue做一个小东西,谁知道一开始就遇到了一个棘手的问题: 首先我想在页面加载前通过ajax请求页面展示所需要的信息,于是我在created钩子函数里面请求了我想要的数据 这一步很顺利,接下来就是要将数据绑定到对应的元素中,我在这里需要将请求得到的图

  • 问题内容: 我已经尝试了这两个代码,但是却没有执行,有人可以告诉我为什么吗? 提前致谢 问题答案: 试试这个代码: 它会在源元素的位置单击并按住,移至目标元素的位置,然后释放鼠标。 要么 它将单击并按住源元素的位置,移动给定的偏移量,然后释放鼠标。 要么 它将执行以上两个代码的操作。 我在Java上编写此代码。您可以转换为指定的语言。 从动作引用。