jquery datatable ajax reload 再次提交表单

Question

我正在使用 jquery 数据table 从服务器获取数据，然后我也在编辑这个 table 以添加新数据。添加自动刷新后，创建请求重复提交。这是我的 table

var dataTableInitilizationConfig = {
    "iDisplayLength": 50,
    "aLengthMenu": [20, 50, 100, 200],
    "bJQueryUI":false,
    "bDestroy":true,
    "bProcessing":true,
    "sDom": '<"search-bar"f>rt<"clear">'+ '<"select-bar"l>t<"clear">' +
    '<"bottom-left"i><"bottom-right"p>',
    "oLanguage": {
        "sSearch": "",
        "sSearchPlaceholder": "Search",
        "sLengthMenu": "Show: _MENU_ ",
        "sNext": "Next page"
    },

    'columns':[ //Column names
    ],
    'ajax': function (data, callback, settings) {
        var data_table = this;

        data_table.fnProcessingIndicator(true);

        $.ajax({
            url: '/getFeatures',
            type: 'GET',
            success: function(result){

                callback({
                    'aaData': result
                });

                data_table.fnProcessingIndicator(false);
            },
            failure: function(){
                data_table.fnProcessingIndicator(false);
            }
        });
    }
};

下面是我在这个table中添加一个新的数据行然后自动刷新的方法

function createOrUpdateFeature(url) {
    $('#addNewRow').on('submit', function(e) {
      e.preventDefault();
      $.ajax({
            url: url,
            data: $('#addNewRow').serialize(),
            type: 'POST',
            //dataType: 'script',
            success: function(data){
                data_table_api.ajax.reload();

           }
          });
    });
}

如果我创建一个新行，该行创建成功并且 table 刷新，显示新行。现在，如果我立即尝试编辑新创建的行，创建调用会与更新调用一起再次发生，并且我会得到两行具有相同数据的行。以下是我的编辑电话。

    $('#addNewRow').on('submit', function(){
        $.ajax({
            url: '/updateFeature',
            data: $('#addNewRow').serialize(),
            type: 'POST',
            success: function(){
                data_table_api.ajax.reload();
            }
        });
    });

请注意，添加和编辑的表单是相同的。此外，如果我删除 ajax.reload 调用，一切正常，但不会发生自动刷新。

Answer 1

CAUSE

您已在添加和更新行的代码中两次将提交处理程序附加到同一表单 addNewRow。

$('#addNewRow').on('submit', function(e) { 
   // ... skipped ...
});

SOLUTION

根据您的代码结构和逻辑，可能会有很多解决方案。最简单的方法是使用下面的代码分离以前的处理程序。

$('#addNewRow').off('submit');
$('#addNewRow').on('submit', function(e) { 
   // ... skipped ...
});

jquery datatable ajax reload 再次提交表单

jquery datatable ajax reload submits the form again

ajax

jquery

datatables