Jquery button ajax click el evento de disparar dos veces?

Tengo una página de empleado que muestra la list de empleados con una opción de edición. Al hacer clic en el button Editar, jquery-ajax se usa para search los datos del server. El problema es cuando hago clic en el button editar el evento se dispara dos veces.

Estoy usando un file js separado y estoy remitiendo el file a la página principal. El script funcionaba bien hasta que lo moví al file separado js.

enter image description here

El script de Jquery es

  //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 dos veces.

En líneas

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

en realidad haces dos llamadas AJAX diferentes , una con callback success y otra con callback por error .

En tu caso, tu llamada debería verse así:

 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; 

Establecerá ambas devoluciones de llamada a la única llamada AJAX y ejecutará esta.