javascript - Jquery ajax button click event firing twice? - Stack Overflow

admin管理员组

文章数量:1345891

I have a Employee page which shows list of employees with an edit option. On clicking the edit button jquery-ajax is used to fetch the data from the server. The problem is when I click the edit button the event is firing twice.

I am using a seperate js file and is referring the file to the main page.The script was working fine until i moved it to the seperate js file.

The Jquery script is

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

};

I have a Employee page which shows list of employees with an edit option. On clicking the edit button jquery-ajax is used to fetch the data from the server. The problem is when I click the edit button the event is firing twice.

I am using a seperate js file and is referring the file to the main page.The script was working fine until i moved it to the seperate js file.

The Jquery script is

  //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-mvc-4
• submit

Share Improve this question Follow edited Sep 28, 2015 at 8:50 Yeldar Kurmangaliyev 34.3k1313 gold badges6464 silver badges104104 bronze badges asked Sep 28, 2015 at 8:18 ksgksg 4,06788 gold badges5353 silver badges9898 bronze badges 0

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 15

You call $.ajax twice.

At lines

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

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

you actually make two different AJAX calls - one with success callback only, another one with error callback.

In your case, your call should look like this:

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;

It will set both callbacks to the single AJAX call and execute this one.

本文标签： javascriptJquery ajax button click event firing twiceStack Overflow