Ajax执行多次

Question

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

$(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

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

您可以通过以下方法轻松解决此问题：首先删除提交事件处理程序（通过使用.off() ，例如$('#__dsAjaxAntiForgeryForm').off().on('submit', function () {

Answer 2

您可以使用事件委托并分离事件处理程序http://learn.jquery.com/events/event-delegation/

每次单击$('#postEditDatasource')您都将分配事件$('#__dsAjaxAntiForgeryForm').on('submit', function () ...因此，将是这样的：

$(document).ready(function () {
    $('#yourParentDivOrForm')on('click','#postEditDatasource', function (event) {
        //serialise and assign json data to hidden field
        $('#dsDeletedDP').val(JSON.stringify(deleted));
        $('#dsEditedDP').val(JSON.stringify(editDPArr));
    });
    $('#yourParentDivOrForm').on('submit', '#__dsAjaxAntiForgeryForm', function () {
        //get the form
        var form = $('#__dsAjaxAntiForgeryForm');
        var URL = 'Settings/EditDatasource';

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