Click event running 3 раза

Question

У меня есть этот скрипт, который берет данные из моей базы данных с помощью GET и показывает их в HTML, а затем обновляет в базе данных, когда я нажимаю на этот флажок, однако, когда я нажимаю этот флажок, PUT сделано три раза. Кто-нибудь знает, как это решить?

Любая помощь приветствуется.

код ниже:

$.ajax({ 
    type: 'GET', 
    async: false, 
    url: 'https://app.myapp.com/reservations', 
    success:function(reservations){ 

     reservas.forEach (function (reservation) { 
      var HTML = []; 


      HTML.push('<tr class="reservations">'); 
      HTML.push('<td> <input type="checkbox" class="checkbox" data-id="' + reservation._id + '" data-nome="' + reservation.nome + '" data-email="' + reservation.email + '" /> </td>'); 
      HTML.push('<td>' + reservation._id + '</td>'); 
      HTML.push('<td>' + reservation.nome + '</td>'); 
      HTML.push('<td>' + reservation.email + '</td>'); 
      HTML.push('</tr>'); 
      $('tbody').append(HTML.join("")); 

      $(function(){ 
       $(document).on('click', '.checkbox', function(){ 
        console.log('salvo'); 
        var update = $(this); 


        $.ajax({ 

         type: 'PUT', 
         url: 'https://localhost/datas', 
         data: { 
          _id: update.attr('data-id'), 
          nome: update.attr('data-nome'), 
          email: update.attr('data-email'), 
         }, 
         sucess:function (success) { 
          alert('updated!!'); 
         }, 
         error:function(err) { 
          console.log(err); 
         } 
        }); 
       }); 
      }); 
     }) 
    }, 
    error:function(e){ 
     console.log(e); 
    } 
}); 

Answer 1

Проблема в том, что вы добавляете событие на каждой итерации. Вы должны взять функцию прослушивателя событий из этого .each. Поскольку вы используете функцию jQuery над самим документом, вы можете полностью удалить этот прослушиватель событий из своей функции ajax и в любом случае будет прислушиваться к щелчку на флажке (поскольку, как уже упоминалось, вы привязываете событие к документ, а не сами флажки, поэтому вам не нужно, чтобы они существовали до того, как вы связали событие).

Answer 2

Вы назначаете ваш обработчик щелчка по всему миру в случае успеха другого запроса. Он также находится внутри цикла foreach. Чтобы исправить это, переместите назначение обработчика кликов вне обработчика успеха и вне любых циклов.