快捷導(dǎo)航

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

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

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

因為我不知道怎么描述這個問題，故標(biāo)題起的這么坑爹

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

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

開始我是這樣寫的

 
$('.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名

運行之后點擊星星沒有反應(yīng)

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

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

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

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

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

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

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

您可能感興趣的文章: