Выполнение Ajax несколько раз

Question

Я написал запрос на отправку ajax, однако он, кажется, выполняет несколько раз. В первый раз, когда я нажимаю кнопку, он будет выполняться только один раз, однако во второй раз, когда я нажимаю кнопку, он будет дважды запускать код, три раза будет выполняться три раза и так далее. Я не уверен, что вызывает эту проблему, вот мой запрос на отправку ajax. Если вам нужна какая-либо другая информация, я с радостью предоставит ее.

$(document).ready(function() { 
$('#postEditDatasource').click(function (event) { 
    //serialise and assign json data to hidden field 
    $('#dsDeletedDP').val(JSON.stringify(deleted)); 
    $('#dsEditedDP').val(JSON.stringify(editDPArr)); 

    //get the form 
    var form = $('#__dsAjaxAntiForgeryForm'); 

    var URL = 'Settings/EditDatasource'; 

    $('#__dsAjaxAntiForgeryForm').on('submit', function() { 
     $.ajax({ 
      url: URL, 
      data: form.serialize(), 
      type: 'POST', 
      success: function (result) { 

       reloadPostEditAction($('#dsID').val()); 

       if (deletedDatapoints != null) { 
        DeleteFromTable(deleted); 
       } 

       //clear all values from hidden inputs 
       $('input:hidden').each(function() { 
        if ($(this).attr('name') != '__RequestVerificationToken' && $(this).attr('id') != 'dsID') { 
         $(this).val(''); 
        } 
       }); 

       $('#dsEditedDP').val(''); 

       ShowDatasourcePostAlert('#successPost', 3000); 
      }, 
      error: function (jqXHR, textStatus, errorThrown) { 
       //alert(jqXHR + ', ' + textStatus + ', ' + errorThrown); 
       ShowDatasourcePostAlert('#successPost', 3000); 
      } 
     }) 
     return false; 
    }) 
}); 
}) 

Answer 1

Ожидается, что возникнет проблема с вашим кодом.

Каждый раз, когда происходит это событие: $('#postEditDatasource').click(function (event) {

Вы добавляете новое событие здесь: $('#__dsAjaxAntiForgeryForm').on('submit', function() {

Таким образом, соединение событий. Каждый раз, когда вы нажимаете элемент #postEditDatasource, назначьте обработчик событий отправки #__dsAjaxAntiForgeryForm

Другими словами, при первом щелчке у вас есть один обработчик событий отправки. Во второй раз, когда вы нажимаете, у вас есть два обработчика событий отправки. Третий раз нажать кнопку, вы будете иметь три представить обработчик событий, и так далее ...

Вы можете легко исправить, убрав представить обработчик событий первого (с помощью .off(), как этого $('#__dsAjaxAntiForgeryForm').off().on('submit', function() {

Answer 2

Вы можете использовать делегирование событий и отделить ваши eventhandlers http://learn.jquery.com/events/event-delegation/

Каждый раз, когда вы щелкаете на вашем $('#postEditDatasource') вы назначаете событие $('#__dsAjaxAntiForgeryForm').on('submit', function() ... Таким образом, это будет что-то вроде этого:.

$(document).ready(function() { 
    $('#yourParentDivOrForm')on('click','#postEditDatasource', function (event) { 
     //serialise and assign json data to hidden field 
     $('#dsDeletedDP').val(JSON.stringify(deleted)); 
     $('#dsEditedDP').val(JSON.stringify(editDPArr)); 
    }); 
    $('#yourParentDivOrForm').on('submit', '#__dsAjaxAntiForgeryForm', function() { 
     //get the form 
     var form = $('#__dsAjaxAntiForgeryForm'); 
     var URL = 'Settings/EditDatasource'; 

     $.ajax({ 
      url: URL, 
      data: form.serialize(), 
      type: 'POST', 
      success: function (result) { 

       reloadPostEditAction($('#dsID').val()); 

       if (deletedDatapoints != null) { 
        DeleteFromTable(deleted); 
       } 

       //clear all values from hidden inputs 
       $('input:hidden').each(function() { 
        if ($(this).attr('name') != '__RequestVerificationToken' && $(this).attr('id') != 'dsID') { 
         $(this).val(''); 
        } 
       }); 

       $('#dsEditedDP').val(''); 

       ShowDatasourcePostAlert('#successPost', 3000); 
      }, 
      error: function (jqXHR, textStatus, errorThrown) { 
       //alert(jqXHR + ', ' + textStatus + ', ' + errorThrown); 
       ShowDatasourcePostAlert('#successPost', 3000); 
      } 
     }); 
     return false; 
    }); 
});