我有一个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;
};
解决方法
你两次调用$.ajax.
在线
$.ajax(options).success(function(data)... $.ajax(options).error(function(data)...
你实际上做了两个不同的AJAX调用 – 一个只有成功回调,另一个有错误回调.
在您的情况下,您的通话应如下所示：
var options = {
type: "GET",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调用并执行此调用.