jQuery的Ajax表單提交與第一次點擊請求不工作有什麼可能的原因

Question

在第一次單擊它並沒有得到迴應，但在第二次點擊它給了預期的效果

我使用多發的形式

<form action="" method="" id="formproduct"> 
    <input type="hidden" name="id" class="productid" 
     value="<?php echo $row['Product_id'];?>" > 
    <button name="submit" class="btn">Add To Cart</button> 
</form> 
<script> 
$(document).ready(function(){ 
    jQuery("#formproduct").submit(function(event){ 
     event.preventDefault(); 
     $("form").on("click", "button[name=submit]", function(){ 
      var form = $(this).closest("form"); // find the form to relate to 
      var formData = { product: $(".productid", form).val() }; 
      jQuery.ajax({ 
       type: "POST", 
       url: "server-cart.php",///contain the url of ajax 
       data:formData, 
       dataType:"json", 
       success : function (response){} 
      }); 
     } 
    } 
} 
</script> 

Answer 1

jQuery("#formproduct").submit(function(event){ 
    ... 
    $("form").on("click", "button[name=submit]", function(){}); 
    ... 
}); 

即綁定提交處理程序。當表單提交時，該邏輯會將點擊處理程序綁定到表單。所以之後點擊表單提交按鈕將執行該邏輯。如果您希望首次發生點擊邏輯，您必須將其移出提交處理程序。

Answer 2

剛剛擺脫單擊處理程序，並做了ajax直接在提交處理

jQuery("#formproduct").submit(function(event) { 
    event.preventDefault(); 

    var form = $(this); // "this" is the form 
    var formData = { 
     product: $(".productid", form).val() 
    }; 
    jQuery.ajax({ 
     type: "POST", 
     url: "server-cart.php", ///contain the url of ajax 
     data: formData, 
     dataType: "json", 
     success: function(response) {} 
    }); 

}); 

的好處是用戶可以使用鍵盤也