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)始我是這樣寫的
$('.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)綁定事件
$("#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ò)程是這樣的,今天我寫一個(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)題
您可能感興趣的文章:
- JQuery實(shí)現(xiàn)當(dāng)鼠標(biāo)停留在某區(qū)域3秒后自動(dòng)執(zhí)行
- JQuery給元素綁定click事件多次執(zhí)行的解決方法
- jquery阻止后續(xù)事件只執(zhí)行第一個(gè)事件
- jquery $.ajax各個(gè)事件執(zhí)行順序
- jquery 事件執(zhí)行檢測(cè)代碼
- JQuery 給元素綁定click事件多次執(zhí)行的解決方法
- 淺析jquery如何判斷滾動(dòng)條滾到頁(yè)面底部并執(zhí)行事件
- Jquery on方法綁定事件后執(zhí)行多次的解決方法
- JQuery中DOM加載與事件執(zhí)行實(shí)例分析
- 淺談js在html中的加載執(zhí)行順序,多個(gè)jquery ready執(zhí)行順序
- 使用jQuery加載html頁(yè)面到指定的div實(shí)現(xiàn)方法
- Jquery在指定DIV加載HTML示例代碼
- jQuery實(shí)現(xiàn)在HTML文檔加載完畢后自動(dòng)執(zhí)行某個(gè)事件的方法
相關(guān)文章
jquery 回調(diào)操作實(shí)例分析【回調(diào)成功與回調(diào)失敗的情況】
這篇文章主要介紹了jquery 回調(diào)操作,結(jié)合實(shí)例形式分析了jQuery回調(diào)成功與回調(diào)失敗的情況及相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-09-09修改jQuery.Autocomplete插件 支持中文輸入法 避免TAB、ENTER鍵失效、導(dǎo)致表單提交
jQuery.Autocomplete 是jquery的流行插件,能夠很好的實(shí)現(xiàn)輸入框的自動(dòng)完成(autocomplete)、建議提示(input suggest)功能,支持ajax數(shù)據(jù)加載。2009-10-10jQuery 遍歷-nextUntil()方法以及prevUntil()方法的使用介紹
本篇文章介紹了,jQuery 遍歷-nextUntil()方法以及prevUntil()方法的使用。需要的朋友參考下2013-04-04jQuery實(shí)現(xiàn)菜單感應(yīng)鼠標(biāo)滑動(dòng)動(dòng)畫效果的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)菜單感應(yīng)鼠標(biāo)滑動(dòng)動(dòng)畫效果的方法,實(shí)例分析了jQuery中鼠標(biāo)事件及animate的使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-02-02