Jquery ajax按钮单击事件触发两次？答案

【问题标题】：Jquery ajax button click event firing twice?Jquery ajax按钮单击事件触发两次？
【发布时间】：2015-09-28 08:18:51
【问题描述】：

我有一个员工页面，其中显示了带有编辑选项的员工列表。单击编辑按钮时，jquery-ajax 用于从服务器获取数据。问题是当我单击编辑按钮时，事件会触发两次。

我正在使用一个单独的 js 文件，并将该文件引用到主页。脚本运行良好，直到我将它移动到单独的 js 文件。

Jquery 脚本是

  //ajaxGet on edit button click
$(document).on('click', '.editRole', ajaxGet);

 var ajaxGet = function (e) {       


    var spinner = $(this).parent('div').find('.spinner');
    var href = $("#editMenuSettings").data("url");
    var menuRoleId = $(this).data('id');

    spinner.toggle(true);

    var options = {
        type: "GET",
        url: href,
        data: { menuRoleId: menuRoleId }
    };

    $.ajax(options).success(function (data) {
        spinner.toggle(false);
        $(".modal-body").html(data);
        $(".modal").modal({
            backdrop: 'static'
        });
    });

    $.ajax(options).error(function (data) {
        spinner.toggle(false);
        toastr.error("Oops..Some thing gone wrong");
    });

    return false;

};

【问题讨论】：

标签： javascript jquery ajax asp.net-mvc-4 submit

【解决方案1】：

您拨打$.ajax 两次。

在行

$.ajax(options).success(function(data)...

$.ajax(options).error(function(data)...

您实际上进行了两次不同 AJAX 调用 - 一次仅使用success 回调，另一次使用error 回调。

在您的情况下，您的调用应如下所示：

var options = {
    type: "GET",
    url: href,
    data: { menuRoleId: menuRoleId }
};

$.ajax(options)
    .success(function (data) {
        spinner.toggle(false);
        $(".modal-body").html(data);
        $(".modal").modal({
            backdrop: 'static'
        });
    })
    .error(function (data) {
        spinner.toggle(false);
        toastr.error("Oops..Some thing gone wrong");
    });

return false;

它将两个回调设置为单个 AJAX 调用并执行此调用。

【讨论】：