表單驗證在ajax調用後無法工作

Question

表單驗證在表單加載ajax調用後無法正常工作。我怎樣才能解決這個問題？

$(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

作爲api.jquery狀態，

的.submit()方法是用於.on("submit", handler)在第一變體中，並且在第三.trigger("submit")的快捷方式。

所以這兩個構造的行爲應該是相同的。

而且，你是從#add_product委託你submit事件到document是低性能的原因，現在有監聽文檔中所有提交的事件。

也許因爲事件委託，你可能在你的代碼中有一個e.stopPropagation的地方，它會阻止事件對文檔的自然冒泡，因此不會執行處理程序。

如果可能的話，限制範圍比在文檔上監聽要好得多。

嘗試以下操作：

$(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

嘗試添加在你的處理器 '返回false'：

$(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

嘗試以下操作：

$(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>