Jquery ajax按钮点击事件两次触发？

Question

我有一个Employee页面,其中显示了具有编辑选项的员工列表.单击编辑按钮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;

};

Answer 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调用并执行此调用.