javascript - Ajax执行多次

Question

我已经编写了一个ajax post请求，但它似乎执行了多次。第一次单击该按钮时，它只会执行一次，但是第二次单击该按钮时，它将运行代码两次，三次将执行三次，依此类推。我不确定是什么导致了这个问题，这是我的 ajax post 请求。如果需要任何其他信息，我很乐意提供。

$(document).ready(function () {
$('#postEditDatasource').click(function (event) {
    //serialise and assign json data to hidden field
    $('#dsDeletedDP').val(JSON.stringify(deleted));
    $('#dsEditedDP').val(JSON.stringify(editDPArr));

    //get the form
    var form = $('#__dsAjaxAntiForgeryForm');

    var URL = 'Settings/EditDatasource';

    $('#__dsAjaxAntiForgeryForm').on('submit', function () {
        $.ajax({
            url: URL,
            data: form.serialize(),
            type: 'POST',
            success: function (result) {

                reloadPostEditAction($('#dsID').val());

                if (deletedDatapoints != null) {
                    DeleteFromTable(deleted);
                }

                //clear all values from hidden inputs
                $('input:hidden').each(function () {
                    if ($(this).attr('name') != '__RequestVerificationToken' && $(this).attr('id') != 'dsID') {
                        $(this).val('');
                    }
                });

                $('#dsEditedDP').val('');

                ShowDatasourcePostAlert('#successPost', 3000);
            },
            error: function (jqXHR, textStatus, errorThrown) {
                //alert(jqXHR + ', ' + textStatus + ', ' + errorThrown);
                ShowDatasourcePostAlert('#successPost', 3000);
            }
        })
        return false;
    })
});
})

Answer 1

您遇到的问题是您的代码中预料到的。

每次发生此事件时:$('#postEditDatasource').click(function (event) {

您在此处添加一个新事件:$('#__dsAjaxAntiForgeryForm').on('submit', function () {

所以，事件复合了。每次单击 #postEditDatasource 元素时，将提交事件处理程序分配给 #__dsAjaxAntiForgeryForm

换句话说，第一次单击时，您有一个提交事件处理程序。第二次单击时，您将有两个提交事件处理程序。第三次单击时，您将拥有三个提交事件处理程序，依此类推...

您可以通过首先删除提交事件处理程序(使用 .off()，例如 $('#__dsAjaxAntiForgeryForm').off().on('提交', function () {