防止js函數多次運行

Question

新手在這里..

我有一個js函數可以運行3次，因為我已經調用了3次。

var deleteFunc = function() {
   $('.delete').on('click', function(){
      // ajax code here...
   });
};

(loadData = function(){
   // this will be in a loop didn't place its because it too long
   var content = '<tr><td>1</td><td>John</td><td><span class="delete">Delete</span></td></tr>';

   $('#first_tbl').append(content);

   deleteFunc();
})();

(loadSecondData = function(){
   // this will be in a loop didn't place its because it too long
   var content = '<tr><td>1</td><td>John</td><td><span class="delete">Delete</span></td></tr>';

   $('#second_tbl').append(content);

   deleteFunc();
})();

(loadThirdData = function(){
   // this will be in a loop didn't place its because it too long
   var content = '<tr><td>1</td><td>John</td><td><span class="delete">Delete</span></td></tr>';

   $('#third_tbl').append(content);

   deleteFunc();
})();

當我單擊.delete ， deleteFunc()將運行3次。

我有一個想法，我將創建3個刪除函數，如deleteFunc() deleteSecondFunc() deleteThirdFunc() ，但是我注意到它會多余，因為它具有相同的功能和代碼。

誰能幫我解決這個問題？

Answer 1

刪除以前的綁定，然后添加新的綁定。

var deleteFunc = function() {
    $('.delete').off('click').on('click', function(){
       // some ajax code here...
    });
};