События jQuery запускаются более одного раза

Question

У меня есть таблица, где некоторые данные отображаются пользователю. Есть кнопки для CRUD'ing данных, и я использую jQuery на передней панели. Когда кнопка нажата, отображается модальная мода, и данные обновляются с помощью запроса ajax.

Моя проблема: если я нажму кнопку «Обновить», закройте модальную, нажмите на другую кнопку обновления и обновите данные, она сохранит те же самые новые данные на каждые нажав строку. Короче говоря, мой код выполняется несколько раз, столько, сколько количества кликов, которые я выполнил.

Вот мой код: http://pastebin.com/QWQHM6aW

$(document).ready(function() { 
    /*--------------------------------------------*/ 
    // GENERAL 
    /*--------------------------------------------*/ 
    function loadingStart() { 
     $("#overlay").show(); 
     $("#loading").show(); 
    } 

    function loadingDone() { 
     $("#overlay").hide(); 
     $("#loading").hide(); 
    } 

    $(document).ajaxStop(function() { 
     loadingDone(); 
     //alert('Ajax Terminou'); 
    }); 

    function reloadRows() { 
     $.post("ajax.php", { type: "AllRows" }) // Faz um post do tipo AllRows. 
     .done(function(data) { 
      alert(data); 
      //$("#tbody").html(data); 
     }); 
    } 
    $("body").on("click", ".update-socio-btn", updateSocio); 
    /*--------------------------------------------*/ 
    // UPDATE 
    /*--------------------------------------------*/ 
    function updateSocio(event) { 
     $("#socio-form input").val(''); // Apagar os valores do form. 
     loadingStart(); // Começar o Loading... 
     var id = $(this).closest('tr').find('.id-holder').html(); // Pegar o valor do id holder e salvar na var id. 
     $("#socio-form input").removeClass("input-transparent").prop("disabled", false); // Queremos ver e utilizar os inputs. 
     $(".modal-footer").removeClass("hidden"); // Queremos ver o footer do modal. 
     $(".btn-modal").attr("id", "update-btn-confirm"); // Atribui o id: update-btn-confirm ao .btn-modal. 

     $.post("ajax.php", { type: "read", id: id }) // Faz um post do tipo Read e retorna os valores nos inputs correspondentes 
     .done(function(data) { 
      console.log('read'); 
      jsonOBJ = jQuery.parseJSON(data); 
      for (var key in jsonOBJ) { 
       $("input[name=" + key + "]").val(jsonOBJ[key]); 
      } 
     }); 

     $("#update-btn-confirm").click(function() { // Quando clicar no botão de salvar. 
      var formArray = $("#socio-form").serializeArray(); // Pega todas as informações dos inputs e transforma em um array json. 
      $.post("ajax.php", { type: "update", id: id, inputs: formArray }) // Faz um post do tipo Update. 
      .done(function(data) { 
       console.log('uptade'); 
       alert(data); 
       event.stopPropagation(); 
      }); 
     }); 
     event.preventDefault(); 
    } 
}); 

Я сильно подозреваю, что проблема лежит на методе .on, но я с трудом точного определения его. Я знаю, что могу использовать .live() или .bind(), но я стараюсь избегать этого, поскольку оба они устарели.

Любые предложения?

Answer 1

Каждый раз, когда вы нажимаете элемент с классом .update-socio-btn, запускается функция updateSocio. Каждый раз, когда запускается updateSocio, новое событие click связано с #update-btn-confirm.

Вы можете исправить это, перемещая привязку клика за пределами функции updateSocio и только привязывая обработчик событий один раз.