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(){});
    ...
});

这是绑定提交处理程序。表单提交时，该逻辑然后将单击处理程序绑定到表单。然后单击表单提交按钮将执行该逻辑。如果您希望第一次将Click逻辑移动到提交处理程序之外，则需要单击逻辑。

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) {}
    });

});

用户可以使用键盘提交的好处

jquery ajax表单提交请求，第一次单击是不起作用的可能原因

2 个答案: