这篇文章主要为大家解决下为什么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,执行对应函数,其余在这个块中的元素发生点击事件则忽略

这样就可以解决动态加载数据中事件绑定的问题
最新资讯
美团:到店餐饮及本地生活服务商户免佣政策扩至全国

美团:到店餐饮及本地生

美团宣布,在此前“七项商户帮扶措施”基础上,针对到店餐
从奢靡到大众:内地KTV三十年兴衰,出路何在?

从奢靡到大众:内地KTV

传统KTV行业目前市场规模超千亿,但面临着租金和人工成
特斯拉恢复交付中国产Model 3 此前因疫情暂停

特斯拉恢复交付中国产

据外媒援引特斯拉一位公司代表称,该公司已完全恢复了其
报告:亚马逊在可视门铃市场领先谷歌

报告:亚马逊在可视门铃

StrStrategy Analytics智能家居战略服务最新发布的研
微信战"疫"数据报告:小程序超市业态访问同比增115%

微信战"疫"数据报告

截至2月14日,小程序超市业态访问量同比增长115%,生鲜果
高德联合47家网约车:加大运力 推测温消毒安心车

高德联合47家网约车:加

高德建议乘客在“安心出行月”打车时,选择标有“测温消
最新文章
Vue实现图片与文字混输效果

Vue实现图片与文字混

用多了 JQuery ,习惯了使用JQuery的API操作 DOM ,几乎忘
Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)

Vue实现点击当前元素

这篇文章主要介绍了Vue实现点击当前元素以外的地方隐
Vue实现验证码功能

Vue实现验证码功能

这篇文章主要为大家详细介绍了Vue实现验证码功能,文中
JS实现的雪花飘落特效示例

JS实现的雪花飘落特效

这篇文章主要介绍了JS实现的雪花飘落特效,结合实例形
微信小程序实现图片压缩

微信小程序实现图片压

这篇文章主要为大家详细介绍了微信小程序实现图片压缩
JavaScript实现京东放大镜效果

JavaScript实现京东放

这篇文章主要为大家详细介绍了JavaScript实现京东放大