Ajax-Anfragen werden an mehrere Treffer angehängt

Question

Falls der Benutzer einige ungültige Daten füllt, wird eine Ajax-Anfrage ausgelöst und eine Fehlermeldung wird angezeigt. Wenn nun der Benutzer die Daten erneut korrigiert/oder ungültige Daten erneut eingibt, werden 2 Anforderungen ausgelöst, das nächste Mal 3 und es wird weiter addiert.

Dies ist wahrscheinlich wegen der Petersilie js Bibliothek. Wenn ich den Code der Petersilie entferne, funktioniert es gut. Irgendeine Idee? Hier

ist der Ajax-Code

$('#upload-profile-button').on('click', function(e) { 
     $("#upload-profile-form").parsley().validate(); 
     $("#upload-profile-form").parsley().on('form:validate', function (formInstance) { 
      var isFormValid = formInstance.isValid(); 
      if(isFormValid){ 
     e.preventDefault(); 
     $('#upload-profile-button').html('Uploading...'); 
     var fd = new FormData($("#upload-profile-form")[0]); 
     $.ajax({ 
      type : 'POST', 
      url : '/mbatch/batch/uploadBatch', 
      data : fd, 
      processData : false, 
      contentType : false, 
      beforeSend : function() { 

      }, 
      success : function(response) { 
       if (response.data.fetchTpodSuccess == true) { 
        window.location.href= "/mbatch/batch/listBatch"; 
       } else { 
        new PNotify({ 
         title: 'Notice', 
         text: response.message, 
         type: 'error', 
         styling: 'bootstrap3' 
        }); 
         $('#upload-profile-button').html('Submit'); 
       } 
      }, 
      error : function(data) { 
       new PNotify({ 
        title: 'Notice', 
        text: JSON.parse(data.responseText).message, 
        type: 'error', 
        styling: 'bootstrap3' 
       }); 
        $('#upload-profile-button').html('Submit'); 
      } 
     }); 
} 
      }); 
    }); 

Hier ist der HTML-Code-Snippet

<button id="upload-profile-button" type="button" 
            class="btn btn-primary">Submit</button> 

Alle Leitungen würde sehr geschätzt werden.

Answer 1

Ich fand heraus, nur die Lösung. Das war, weil ich wurde unter Verwendung von Daten-Petersilie-validate im Formular-Tag als auch und in den js auch

<form id="upload-profile-form" data-parsley-validate enctype="multipart/form-data" 
         name = "uploadBatchForm" 
         class="form-horizontal form-label-left" 
         > 

Petersilie befasst sich mit allen Daten-Petersilie-Validierung Vorkommen in DOM auf Dokument laden und automatisch bindet sie wenn gültig. Sobald eine Formular- oder Feldinstanz an Parsley gebunden ist, wird $ ('# form') ausgeführt. Petersilie (options); aktualisiert die vorhandenen Optionen, ersetzt sie jedoch nicht.

Quelle - http://parsleyjs.org/doc/index.html

Answer 2

Vielleicht rendern Sie das Skript nach jedem Aufruf, sodass es Ihre Klickfunktion mehrmals an das Klickereignis anhängen kann. Wenn dies der Fall ist, versuchen Sie zunächst Ihr Click-Ereignis zu lösen, bevor man wie folgt angehängt:

$('#upload-profile-button').unbind('click').on('click',...