jQuery綁定事件不執行但alert后可以正常執行

2019-11-20 14:57:18

字體：大中小

來源：轉載

供稿：網友

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

主要過程是這樣的，今天我寫一個類似于百度知道那樣有提問答案的頁面，所有的數據都是頁面第一次加載時通過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，執行對應函數，其余在這個塊中的元素發生點擊事件則忽略

這樣就可以解決動態加載數據中事件綁定的問題

上一篇：js 獲取瀏覽器版本以此來調整CSS的樣式

下一篇：javascript圓盤抽獎程序實現原理和完整代碼例子