快捷導(dǎo)航

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

更新時(shí)間：2014年06月03日 09:53:41 作者：

這篇文章主要為大家解決下為什么jQuery綁定事件不執(zhí)行而alert后可以正常執(zhí)行,需要的朋友可以參考下

因?yàn)槲也恢涝趺疵枋鲞@個(gè)問(wèn)題，故標(biāo)題起的這么坑爹

主要過(guò)程是這樣的，今天我寫(xiě)一個(gè)類(lèi)似于百度知道那樣有提問(wèn)答案的頁(yè)面，所有的數(shù)據(jù)都是頁(yè)面第一次加載時(shí)通過(guò)ajax得到的

希望實(shí)現(xiàn)的效果是提問(wèn)者可以通過(guò)店家每個(gè)答案后面的星星符號(hào)選擇采納此答案，被采納的答案星星圖標(biāo)會(huì)變成全黑的。

開(kāi)始我是這樣寫(xiě)的

復(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)題

您可能感興趣的文章: