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('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;
    });
});

Ajax执行多次

2 个答案: