為什么 jquery-ajax 多次提交表單？

Question

我讀過這個： jQuery ajax form submitting multiple times

它沒有幫助。

如果我在表單上鍵入內容並單擊提交按鈕，那么它會發送一個請求。 第二次，如果我輸入內容並單擊它會發送兩個請求。 第三次發送三個請求，依此類推。 為什么是這樣？ 我在 jquery 代碼中做錯了嗎？

這是我的代碼：

索引.php =>

<div id="id_div_1" class="cl_div_comment_container"></div>
<form id="id_form_1" method="POST">
<input type="hidden" value="1" name="nm_hidden_post_id">
<textarea class="cl_textarea_comment" style="resize:none;" rows="1" cols="50" name="nm_comment_content"></textarea>
<input class="cl_submit_comment" type="submit" value="Comment" name="nm_submit_comment">
</form>

javascript.js =>

$(document).ready(function(){
    console.log('hello');
    $('input[name="nm_submit_comment"]').on('click',function(){
        var frm = $(this).closest("form")[0];
        var frm_id = $(frm).attr("id");
        var frm_id_splitted = frm_id.split("_");
        var frm_id_splitted_2 = frm_id_splitted[2];
        console.log($('div#id_div_' + frm_id_splitted_2));
        $(frm).on('submit',function(e){
            e.preventDefault();
            frm_serialized = $(this).serialize();
            console.log(frm_serialized);

            $.ajax({
                url: "save-comment.php",
                method: "POST",
                data: frm_serialized,
                success: function(data) {
                    console.log(data);
                    $('div#id_div_' + frm_id_splitted_2).append(data);
                }
            });

        });

    });

});

保存評論.php =>

<?php

if (session_id() == '') {
    session_start();
}    

echo json_encode($_POST);
?>

Answer 1

您正在為按鈕上的click事件所擁有的代碼中注冊表單submit事件。 所以每次你點擊按鈕，它都會一遍又一遍地添加事件。

這應該足夠好了。

$(document).ready(function(){

   $('input[name="nm_submit_comment"]').on('click',function(e){
        e.preventDefault();

        var frm = $(this).closest("form");
        var frm_id = frm.attr("id");
        var frm_id_splitted = frm_id.split("_");
        var frm_id_splitted_2 = frm_id_splitted[2];

        var frm_serialized = frm.serialize();

        $.ajax({
                url: "save-comment.php",
                method: "POST",
                data: frm_serialized,
                success: function(data) {
                    console.log(data);
                    $('div#id_div_' + frm_id_splitted_2).append(data);
                }
        });

   });

});

Answer 2

on one

$("#id_form_1").one('submit', function (e) {
    e.preventDefault();
    frm_serialized = $(this).serialize();
    console.log(frm_serialized);

    $.ajax({
        url: "save-comment.php",
        method: "POST",
        data: frm_serialized,
        success: function (data) {
            console.log(data);
            $('div#id_div_' + frm_id_splitted_2).append(data);
        }
    });

});

也無需提交bind只需serialize您最近的表單並進行ajax調用。 您在內部綁定事件，事件執行multiple binding 。

Answer 3

你可以試試這個：

$(document).off().on("click","#submit",(function(e) {  
        e.preventDefault();
}