欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery綁定事件不執(zhí)行但alert后可以正常執(zhí)行

 更新時(shí)間:2014年06月03日 09:53:41   作者:  
這篇文章主要為大家解決下為什么jQuery綁定事件不執(zhí)行而alert后可以正常執(zhí)行,需要的朋友可以參考下
因?yàn)槲也恢涝趺疵枋鲞@個(gè)問(wèn)題,故標(biāo)題起的這么坑爹

主要過(guò)程是這樣的,今天我寫一個(gè)類似于百度知道那樣有提問(wèn)答案的頁(yè)面,所有的數(shù)據(jù)都是頁(yè)面第一次加載時(shí)通過(guò)ajax得到的
 
希望實(shí)現(xiàn)的效果是提問(wèn)者可以通過(guò)店家每個(gè)答案后面的星星符號(hào)選擇采納此答案,被采納的答案星星圖標(biāo)會(huì)變成全黑的。

開(kāi)始我是這樣寫的
復(fù)制代碼 代碼如下:

$('.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是每個(gè)星星class名

運(yùn)行之后點(diǎn)擊星星沒(méi)有反應(yīng)

于是我在上面所示代碼段之前加上了一個(gè)alert("test")

此時(shí)加載頁(yè)面后彈出對(duì)話框test之后,星星圖標(biāo)上綁定的事件可以正常執(zhí)行。

上網(wǎng)搜了一通答案,得到的結(jié)果是由于所有的這些答案的節(jié)點(diǎn)都是動(dòng)態(tài)生成的,因此可能在這些節(jié)點(diǎn)還沒(méi)有執(zhí)行完時(shí),就執(zhí)行了事件綁定,以至于并沒(méi)有真正將事件綁定到生成的這些答案的節(jié)點(diǎn)。

而加上alert之后,可以明顯看到,alert語(yǔ)句在所有數(shù)據(jù)得到后才執(zhí)行,確保了事件綁定在數(shù)據(jù)加載完之后執(zhí)行,因此事件成功綁定到了各個(gè)回答上。
http://img.blog.csdn.net/20140531202827265
解決方法,使用jQuery中的on來(lái)綁定事件
復(fù)制代碼 代碼如下:

$("#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

所有在這個(gè)塊里class為choose_right_answer的元素如果發(fā)生點(diǎn)擊則事件冒泡到answer_wrap,執(zhí)行對(duì)應(yīng)函數(shù),其余在這個(gè)塊中的元素發(fā)生點(diǎn)擊事件則忽略

這樣就可以解決動(dòng)態(tài)加載數(shù)據(jù)中事件綁定的問(wèn)題

相關(guān)文章

最新評(píng)論