内部有两个AJAX函数，一个或另一个工作，但互斥

Question

This is the piece of code which I refer to: The first ajax call is: $.ajax(urlHoveringBtn) , the second is $.ajax(url) Just one or the other element. What's wrong?

$(document).on("click", "a.selection", function (e) {
    var $this = $(this);
    var isLive = $this.data("live");
    var url = "/" + _language + "/BetSlip/Add/" + $this.data("selection") + "?odds=" + $this.data("odds") + "&live=" + isLive;
    var urlHoveringBtn = "/" + _language + '/BetSlip/AddHoveringButton/' + $this.data("selection") + "?odds=" + $this.data("odds") + "&live=" + isLive;

    $.ajax(urlHoveringBtn).done(function (dataBtn) {
        if ($(".betslip-access-button").length == 0 && dataBtn.length > 0) {
            $("body").append(dataBtn);
        }
    });

    $.ajax(url).done(function (data) {
        if ($(".betslip-access").length == 0 && data.length > 0) {
            $(".navbar").append(data);
        }
        if (data.length > 0) {
            $this.addClass("in-betslip");
        }
    });
    e.preventDefault();
});

Answer 1

try this

$(document).on("click", "a.selection", function (e) {
        var $this = $(this);
        var isLive = $this.data("live");
        var url = "/" + _language + "/BetSlip/Add/" + $this.data("selection") + "?odds=" + $this.data("odds") + "&live=" + isLive;
        var urlHoveringBtn = "/" + _language + '/BetSlip/AddHoveringButton/' + $this.data("selection") + "?odds=" + $this.data("odds") + "&live=" + isLive;

    var ajax1 = $.ajax(urlHoveringBtn);

    var ajax2 = $.ajax(url);

    $.when( ajax1, ajax2 ).done(function( a1, a2 ) {
        if ($(".betslip-access-button").length == 0 && a1.length > 0) {
                $("body").append(a1);
        }

      if ($(".betslip-access").length == 0 && a2.length > 0) {
            $(".navbar").append(a2);
        }
        if (data.length > 0) {
            $this.addClass("in-betslip");
        }
    });

    e.preventDefault();
});

$.when will make sure both the ajax calls were resolved and then executes the call back.

a1 and a2 are the response of the ajax calls ajax1 and ajax2

for more info check the $.when docs http://api.jquery.com/jquery.when/

Answer 2

urlHoveringBtn and url should be object here, not string. like:

var urlHoveringBtn = {
    url: "/" + _language + '/BetSlip/AddHoveringButton/' + $this.data("selection"),
    data : {
       odds : $this.data("odds"),
       live : isLive
    }
}

Do same for url , this should work. Good luck!