JS動態載入重複綁定

這次帶給大家JS動態載入重複綁定，JS動態載入重複綁定的注意事項有哪些，下面就是實戰案例，一起來看一下。

前言

在新增一條資料時，使用動態載入顯示在介面，後來發現一個嚴重的bug，拿我做的這個便條為例，當我新增一條資料後，然後點選刪除的時候，提示是否刪除，如下圖：

但是當我新增兩個以上的資料時，刪除第幾條就會提示幾次是否確認刪除。

經過排查，終於發現問題所在。

正文

當動態加入內容後，通常會寫上新增的這些p中需要用到的事件，例如click事件/ chang事件等。還拿我的刪除事件為例，由於刪除事件必須寫在新增便籤的事件下，所以當新增第一個資料時，綁定一次，新增第二條時，綁定一次，新增第n個資料時，已經綁定了n次刪除事件，所以在刪除第n條資料時，也會提示n次是否確認刪除。

既然找到了錯誤的原因，就好解決了，在綁定刪除事件前，只要把上次綁定的事件解綁就可以了。

程式碼：

//解绑
$(".deletebtn").off("click");
$(".update").off("change");
//绑定
$(".deletebtn").bind('click', delete_click);
$(".update").bind('change', change_fonts);

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

Angular父元件呼叫子元件步驟詳解

vue新手入門須知

以上是JS動態載入重複綁定的詳細內容。更多資訊請關注PHP中文網其他相關文章！