时间戳

首页 > 解决方案 > 每次调用表单提交函数时都会重复

jquery - 每次调用表单提交函数时都会重复

问题描述

我有一个带有引导模式对话框的数据表页面作为编辑页面。当用户提交表单时，它会重复submit()自页面加载以来执行的所有操作。好吧，它重复了其中的一部分。

这是当有人编辑表格的一行时调用的函数。selectedRow是数据表行

function showEditDialog(selectedRow){
    var selectedRowData = selectedRow.data();
    var selectedRowIndex = selectedRow.index();
    console.log("showing dialog " + selectedRow.index());
    $("#editTitle").text(selectedRowData[0]);
    for(var col = 0; col < columnDefinitions.length; col++){
        //columnDefinitions is an array with metadata about each column
        // jquery wouldn't work for some reason
        document.getElementById(columnDefinitions[col].columnName + "_input").value = selectedRowData[col];
    }

    $("#modalEditDialog").modal();
    var frm = $('#editForm');
    frm.submit(function(event){
        console.log("submit " + selectedRowIndex);
        event.preventDefault();
        var theData = frm.serialize();
        $.ajax({
            method: 'POST',
            url: 'update.php',
            data: theData,
            success: function(theReply){
                console.log(theReply);
            },
            error: function(xhr, desc, err){
                alert(err);
            }
        });
        var formInputs = $("#modalEditDialog :input[id$=input]");
        for (var i = 0; i < formInputs.length; i++){
            theTable.cell(selectedRowIndex, i).data(formInputs[i].value);
        }
        $("#modalEditDialog").modal('hide');
    });
}

当表单被调用时，选定行的数据被复制到输入中，然后提交函数将更新的数据从表单复制回表中的选定行，并在服务器上更新它。

这一切都很有效，除了当它被调用时，它会记住它被调用的所有时间，并从最后一次刷新表行，除了它用表单中的当前数据刷新它们。

如果我查看控制台日志，我会看到：

//first time I hit the edit button
showing dialog 1428        tapeDB:183:17
submit 1428                tapeDB:193:21
updated 1428  successfully tapeDB:203:29 //from update.php

//next time I hit the edit button:
showing dialog 1427        tapeDB:183:17
submit 1428                tapeDB:193:21 //WTF?
submit 1427                tapeDB:193:21
updated 1427  successfully tapeDB:203:29 //from update.php

它是累积的，所以如果我再次调用它，它适用于三行，依此类推。起初我认为它没有进行 ajax 调用，但它可能是，只是因为来自表单的信息被发送，服务器只更新一行。

这是我如何调用编辑对话框（daataa是我的表）：

$("#daataa tbody").on('dblclick', 'tr', function(){
    showEditDialog(theTable.row("#"+this.id));
});

标签： jquerydatatablesbootstrap-4bootstrap-modal

解决方案

好的，原因是我对javascript有一个非常基本的误解。当我将函数附加到提交按钮时，每次显示表单时都会附加它，这意味着每次都会附加一个新的函数副本。我通过从任何以前的实例中删除函数来修复它，如下所示：

var frm = $('#editForm');
frm.off("submit"); //detach any existing submits.
frm.submit(function(event){…

推荐阅读