Formularüberprüfung funktioniert nicht nach Ajaxaufruf

Question

Formularüberprüfung funktioniert nicht ordnungsgemäß, nachdem Formular mit einem AJAX-Aufruf geladen wird. Wie kann ich das beheben?

$(document).ready(function() { 
 
    // $('#add_product').submit(function(e){ 
 
    $(document).on('submit', '#add_product', function(e) { 
 
    e.preventDefault(); 
 
    $.post('script/test.php', { 
 
     naam: $('#naam').val() 
 
     }) 
 
     .done(function(response) { 
 
     bootbox.alert(response); 
 
     parent.fadeOut('slow'); 
 
     }) 
 
     .fail(function() { 
 
     bootbox.alert('error'); 
 
     }) 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="add_product" method="post"> 
 
    <div class="modal-body"> 
 
    <div class="header add_product"> 
 
     <div class="form-group"> 
 
     <label class="control-label">Productnaam*</label> 
 
     <input maxlength="250" id="naam" type="text" required="required" class="form-control" name="naam" /> 
 
     </div> 
 
    </div> 
 
    <hr/> 
 

 
    <div class="modal-footer "> 
 
     <button class="btn btn-success completeBtn btn-lg" name="submit" type="submit" style="width: 100%;"> 
 
         <span class="glyphicon glyphicon-ok-sign"></span> Toevoegen 
 
        </button> 
 
    </div> 
 
</form>

Answer 1

Als api.jquery Staaten

Die .submit() Verfahren zur .on("submit", handler) in der ersten Variante ist eine Abkürzung und .trigger("submit") in der dritten.

Also sollte das Verhalten der beiden Konstrukte identisch sein.

Auch Sie delegieren Ihre submit Veranstaltung von #add_product zum document die Leistung gering ist weil es jetzt zu hören hat für alle Ereignisse in dem Dokument vorzulegen.

Und vielleicht wegen der Ereignisdelegierung, haben Sie möglicherweise eine e.stopPropagation irgendwo in Ihrem Code, die die natürliche Sprudeln von Ihrem Ereignis auf das Dokument, daher keine Ausführung des Handlers stoppen würde.

Es ist viel besser, den Umfang ein wenig zu beschränken, als auf das Dokument zu hören, wenn möglich.

Versuchen Sie Folgendes:

$(document).ready(function(){ 
     $('#add_product').on('submit', function(e) { 
     e.preventDefault(); 
     $.post('script/test.php', 
      {naam: $('#naam').val()}) 
      .done(function(response){ 
       bootbox.alert(response); 
       parent.fadeOut('slow'); 
      }) 
      .fail(function(){ 
       bootbox.alert('error'); 
      }) 
    }); 
}); 

Answer 2

versuchen hinzuzufügen 'return false' in Ihrem Handler:

$(document).on('submit','#add_product',function(e){ 
     e.preventDefault(); 
     $.post('script/test.php', 
      {naam: $('#naam').val()}) 
      .done(function(response){ 
       bootbox.alert(response); 
       parent.fadeOut('slow'); 
      }) 
      .fail(function(){ 
       bootbox.alert('error'); 
      }) 
     return false; 
    }); 

Answer 3

Versuchen Sie Folgendes:

$(document).ready(function() { 
 
    $('#add_product').on('submit', function(e) { 
 
     e.preventDefault(); 
 
     $.post('script/test.php', { naam: $('#naam').val() }) 
 
      .done(function(response) { 
 
       bootbox.alert(response); 
 
       parent.fadeOut('slow'); 
 
      }) 
 
      .fail(function() { 
 
       bootbox.alert('error'); 
 
      }) 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="add_product" method="post"> 
 
       <div class="modal-body"> 
 
        <div class="header add_product"> 
 
         <div class="form-group"> 
 
          <label class="control-label">Productnaam*</label> 
 
          <input maxlength="250" id="naam" type="text" required="required" 
 
            class="form-control" name="naam"/> 
 
         </div> 
 
        </div> 
 
         <hr/> 
 
       
 
       <div class="modal-footer "> 
 
        <button class="btn btn-success completeBtn btn-lg" name="submit" 
 
          type="submit" style="width: 100%;"> 
 
         <span class="glyphicon glyphicon-ok-sign"></span> Toevoegen 
 
        </button> 
 
       </div> 
 
       </form>