防止js函数多次运行

Question

Newbie here..

I have a js function that runs 3 times due to I have call the function 3 times..

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();
})();

When I click the .delete the deleteFunc() will run 3 times.

I have an idea that I will create 3 delete function like deleteFunc() deleteSecondFunc() deleteThirdFunc() , but I notice that it will be redundant since it has same functionality and code.

Can anyone help me how to fix this?

Answer 1

Remove the previous binding and then add new one.

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