Tag di ancoraggio HTML reindirizza il collegamento dopo la richiesta Ajax

Question

Sto provando a scrivere un metodo per catturare i clic dell'utente sul menu di un sito, ma voglio che il processo tace per l'utente, principalmente, quando un utente si posiziona su un'ancora tag, si comporterebbe normalmente (mostrando il link che contiene). Ho provato in vari modi per fare questo, e ho quasi averlo ora di lavoro, il mio codice è il seguente:

<div class="selectNode" id="selectNode_1" style="color: rgb(229, 229, 229); background-color: rgb(47, 47, 47); "> 
    <a href="http://www.google.com" class="selectAnchor" style="color: rgb(229, 229, 229); "> 
    Google 
    </a> 
    <img class="childImage" src="icon.png"> 
</div> 

E in jQuery, ho:

$(".selectAnchor, .menuAnchor").click(function(event){ 
    event.stopPropagation(); 
    console.log(event.target.nodeName); 
    //event.preventDefault(); 

    $.ajax({ 
     type: 'POST', 
     url: 'http://localsite/menuRedirect.php', 
     data: {id:0, module:'Module',source:'Source'}, 
     complete: function(data){ 
     console.log("DONE"); 
     return true; 
     } 
    }); 
}); 

Il link reindirizza al la pagina selezionata, ma il codice Ajax non finisce mai, quindi non registra mai il clic dell'utente.

Ho provato a utilizzare event.preventDefault, ma non c'è modo di riprendere l'evento cancellato.

Parte del problema deriva dalla funzionalità extra, per esempio, la maggior parte degli utenti fare clic destro sul tag di ancoraggio per aprire in una nuova scheda (o utilizzare il controllo + clic o tasto centrale), e usando qualcosa come

<a href="javascript:saveClick(o)">Google</a> 

non è consentito sul sito (per motivi di sicurezza).

Qualche suggerimento su come questo può essere fatto?

Answer 1

Usa event.preventDefault, quindi in caso di successo, utilizzare location.href = self.href

$(".selectAnchor, .menuAnchor").click(function(event){ 
    event.preventDefault(); 
    console.log(event.target.nodeName); 
    var self = this; 

    $.ajax({ 
     type: 'POST', 
     url: 'http://localsite/menuRedirect.php', 
     data: {id:0, module:'Module',source:'Source'}, 
     complete: function(data){ 
     console.log("DONE"); 
     location.href = self.href; 
     } 
    }); 
}); 

o fare uso della proprietà di contesto per rimuovere var self = this

$(".selectAnchor, .menuAnchor").click(function(event){ 
    event.preventDefault(); 
    console.log(event.target.nodeName); 

    $.ajax({ 
     type: 'POST', 
     context: this, 
     url: 'http://localsite/menuRedirect.php', 
     data: {id:0, module:'Module',source:'Source'}, 
     complete: function(data){ 
     console.log("DONE"); 
     location.href = this.href; 
     } 
    }); 
}); 

Answer 2

Try This

<div class="selectNode" id="selectNode_1" style="color: rgb(229, 229, 229); background-color: rgb(47, 47, 47); "> 
    <a href="#" class="selectAnchor" style="color: rgb(229, 229, 229); "> 
    Google 
    </a> 
    <img class="childImage" src="icon.png"> 
</div> 

Allora questo in jQuery:

$(".selectAnchor, .menuAnchor").click(function(event){ 
    event.preventDefault(); 
    console.log(event.target.nodeName); 
    //event.preventDefault(); 

    $.ajax({ 
     type: 'POST', 
     url: 'http://localsite/menuRedirect.php', 
     data: {id:0, module:'Module',source:'Source'}, 
     complete: function(data){ 
     console.log("DONE"); 
     window.location = "http://www.google.com" 
     } 
    }); 
});