Znacznik przekierowania tagu zakotwiczenia HTML po zapytaniu ajaxowym

Question

Próbuję napisać metodę przechwytywania kliknięć użytkowników w menu witryny, ale chcę, aby proces był cichy dla użytkownika, głównie, gdy użytkownik unosi się nad kotwicą tag, zachowywałby się normalnie (pokazując link, który zawiera). Próbowałem na różne sposoby, aby to zrobić, a ja prawie mają to działa teraz, mój kod jest w następujący sposób:

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

I w jQuery, mam:

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

Link przekierowuje do wybraną stronę, ale kod ajax nigdy się nie kończy, dlatego nigdy nie rejestruje kliknięcia użytkownika.

Próbowałem użyć event.preventDefault, ale nie można wznowić anulowanego zdarzenia.

Część problemu wynika z dodatkową funkcjonalnością, powiedzmy, większość użytkowników prawym przyciskiem myszy na tagu zakotwiczenia, aby otworzyć w nowej karcie (lub użyć kontrolę + kliknięcie lub środkowy klik), a przy użyciu coś podobnego

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

nie jest dozwolone na stronie (ze względów bezpieczeństwa).

Jakieś sugestie, jak to zrobić?

Answer 1

Zastosowanie event.preventDefault, następnie na sukces, należy 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; 
     } 
    }); 
}); 

lub skorzystać z właściwości kontekstowego, aby usunąć 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 To

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

Wtedy to w 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" 
     } 
    }); 
});