Etiqueta de anclaje de HTML redirige el enlace después de la solicitud de ajax

Question

Estoy intentando escribir un método para captar los clics del usuario en el menú del sitio, pero quiero que el proceso sea silencioso para el usuario, principalmente cuando un usuario pasa el ancla etiqueta, se comportaría normalmente (mostrando el enlace que contiene). He intentado en varias maneras de hacer esto, y casi lo tengo trabajo ahora, mi código es el siguiente:

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

Y en jQuery, tengo:

$(".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; 
     } 
    }); 
}); 

El enlace redirige a la página seleccionada, pero el código ajax nunca termina, por lo tanto, nunca registra el clic del usuario.

Intenté usar event.preventDefault, pero no hay forma de reanudar el evento cancelado.

Parte del problema proviene de una funcionalidad adicional, por ejemplo, la mayoría de los usuarios hacer clic derecho sobre la etiqueta de anclaje para abrir en una nueva pestaña (o utilice Control + clic o clic medio), y usar algo como

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

no está permitido en el sitio (por razones de seguridad).

¿Alguna sugerencia de cómo se puede hacer esto?

Answer 1

Uso event.preventDefault, a continuación, en caso de éxito, utilice 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 hacer uso de la propiedad de contexto para eliminar 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

intenta esto

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

Entonces esto en 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" 
     } 
    }); 
});