javascript - Hur får jag min jQuery att inte köra <a href> förrän efter ett lyckat ajax-post?

Jag försöker uppdatera databasen och skicka användarens webbläsare till en annan sida med ett klick.

HTML ser ut så här:

<a id='updateLiveProgress' style='width:118px;' href='~link~'>Click here</a>

Javascripten ser ut så här:

        $("#updateLiveProgress").live("click", function(e){

            var ajaxlink = "~ajaxlink~"
            $.post(ajaxlink, function(data, e){
                return true;
            });

        });

När användaren klickar på länken ska databasen uppdateras via ajax-länken och sedan kommer sidan som returneras att bero på ajax-databasuppdateringarna. Problemet är att det verkar som om sidan laddas innan ajax har avslutat uppdateringen av databasen. Jag försöker skicka klickhändelsen vidare till ajax med e för att förhindra att länken körs tills efter att ajax-anropet är klart, men det verkar inte fungera.

Finns det ett bättre sätt för mig att uppnå detta?

Svar #1

Prova att göra detta:

    $("#updateLiveProgress").live("click", function(e){
        e.preventDefault();
        var href = this.href;
        var ajaxlink = "~ajaxlink~"
        $.post(ajaxlink, function(data, e){
            window.location = href;
        });
        return false;
    });

Från och med jQuery 1.7 gör detta (använd .on istället för .live):

    $("#updateLiveProgress").on("click", function(e){
        e.preventDefault();
        var href = this.href;
        var ajaxlink = "~ajaxlink~"
        $.post(ajaxlink, function(data, e){
            window.location = href;
        });
        return false;
    });

Svar #2

Detta är det inneboende beteendet hos Ajax, faktiskt är det vad A står för: asynkront. Ajax-anropet skickas, och klickfunktionen returnerar innan ajax-förfrågan har kommit tillbaka. Du har 2 alternativ:

1. Gör ajax-anropet synkront. Jag skulle inte rekommendera detta.

2. Följ länken manuellt när AJAX-anropet returnerar:

   $("#updateLiveProgress").live("click", function(e){
   
       var ajaxlink = "~ajaxlink~"
       $.post(ajaxlink, function(data, e){
           window.location.href = ajaxlink; // or something similar
       });
   
       return false; // this keeps the link from being followed
   });