ajax請求後的HTML錨標記重定向鏈接

Question

我想寫一個方法來捕捉用戶點擊一個網站菜單，但我希望該過程對用戶沉默，主要是，當用戶懸停在錨標記，它會正常運行（顯示它包含的鏈接）。我試着用各種方式來做到這一點，和我差不多有現在的工作，我的代碼如下：

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

而在jQuery的，我有：

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

鏈接重定向到選定的頁面，但ajax代碼永遠不會完成，因此從未註冊用戶的點擊。

我試過使用event.preventDefault，但沒有辦法恢復取消的事件。問題的

一部分來自額外的功能，比方說，大多數用戶右鍵點擊錨標記在新標籤頁中打開（或使用控制+單擊或中鍵單擊），並使用類似

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

在網站上是不允許的（出於安全原因）。

任何建議如何做到這一點？

Answer 1

使用event.preventDefault，然後在成功，使用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; 
     } 
    }); 
}); 

或使用上下文屬性的刪除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

嘗試這個

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

那麼這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" 
     } 
    }); 
});