Nhấn nút Jquery ajax để kích hoạt sự kiện hai lần?

Question

Tôi có trang Nhân viên hiển thị danh sách nhân viên có tùy chọn chỉnh sửa. Khi nhấp vào nút chỉnh sửa jquery-ajax được sử dụng để tìm nạp dữ liệu từ máy chủ. Vấn đề là khi tôi nhấp vào nút chỉnh sửa sự kiện sẽ kích hoạt hai lần.

Tôi đang sử dụng tệp js riêng biệt và đang giới thiệu tệp đến trang chính. Tập lệnh hoạt động tốt cho đến khi tôi chuyển tệp đó sang tệp js riêng biệt.

Kịch bản Jquery là

//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

Bạn gọi $.ajax hai lần.

Tại dòng

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

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

bạn thực sự làm cho hai khác nhau AJAX gọi - một với success callback chỉ, một số khác với error gọi lại.

Trong trường hợp của bạn, cuộc gọi của bạn sẽ trông như thế này:

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; 

Nó sẽ đặt cả callbacks để gọi AJAX đơn và thực hiện thế này.