JavaScript動態(tài)加載重復綁定問題
前言
在添加一條數(shù)據(jù)時,使用動態(tài)加載顯示在界面,后來發(fā)現(xiàn)一個嚴重的bug,拿我做的這個便簽為例,當我添加一條數(shù)據(jù)后,然后點擊刪除的時候,提示是否刪除,如下圖:

但是當我添加兩條以上的數(shù)據(jù)時,刪除第幾條就會提示幾次是否確認刪除。
經(jīng)過排查,終于發(fā)現(xiàn)問題所在。
正文
當動態(tài)添加內(nèi)容后,通常會寫上添加的這些div中需要用到的事件,比如click事件/chang事件等。還拿我的刪除事件為例,由于刪除事件必須寫在添加便簽的事件下,所以當添加第一條數(shù)據(jù)時,綁定一次,添加第二條時,綁定一次,添加第n條數(shù)據(jù)時,已經(jīng)綁定了n次刪除事件,所以在刪除第n條數(shù)據(jù)時,也就會提示n次是否確認刪除。
既然找到了錯誤的原因,就好解決了,在綁定刪除事件前,只要把上次綁定的事件解綁就可以了。
代碼:
//解綁
$(".deletebtn").off("click");
$(".update").off("change");
//綁定
$(".deletebtn").bind('click', delete_click);
$(".update").bind('change', change_fonts);
總結(jié)
以上所述是小編給大家介紹的JavaScript動態(tài)加載重復綁定問題,希望對大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會
及時回復大家的!
相關(guān)文章
JS如何設(shè)置cookie有效期為當天24點并彈出歡迎登陸界面
這篇文章主要介紹了JS如何設(shè)置cookie有效期為當天24點并彈出歡迎登陸界面的代碼,代碼比較簡單,好理解,需要的朋友可以參考下2016-08-08
JavaScript中的惰性載入函數(shù)及優(yōu)勢
這篇文章主要介紹了JavaScript中的惰性載入函數(shù)及優(yōu)勢,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2020-02-02

