如何使用jQuery click事件根據JSON查詢異步更改href值

Question

我使用bit.ly url shortening service來縮短某個url被髮送到「share on twitter」函數。我只想在用戶實際按下共享按鈕時才加載bit.ly url（由於bit.ly的最大並行請求限制）。 Bit.ly's REST API使用縮短的url返回JSON回調，這會使整個場景異步。

我試着停止點擊事件，並等待JSON調用在啓動點擊之前返回一個值。

我有下面的簡化代碼的jQuery（文件）。就緒（）：

更新後的代碼（簡單化了）！

jQuery("#idofaelement").click(function(event) { 
    event.preventDefault(); //stop the click action 
    var link = jQuery(this); 
    bitlyJSON(function(shortUrl) { 
     link.attr("href", function() { 
      //process shortUrl 
      //return finalized url;     
     }).unbind().click(); 
    }); 
}); 

而下面的代碼來處理bitly縮短（工作得很好）：

function bitlyJSON(func) { 
// 
// build apiUrl here 
// 
jQuery.getJSON(apiUrl, function(data) { 
    jQuery.each(data, function(i, entry) { 
     if (i == "errorCode") { 
      if (entry != "0") { 
       func(longUrl);} 
     } else if (i == "results") { 
      func(entry[longUrl].shortUrl);} 
    }); 
}); 
} (jQuery) 

在href獲取其值發生變化，但最後。點擊（）事件永遠不會被解僱。這在爲href定義靜態值時工作正常，但在使用異步JSON方法時不起作用。

Answer 1

@Tzury Bar Yochay通過建議我使用location.href來更新url來指向正確的方向。還有@Victor幫助他的答案。

我得到的東西有點結合的答案，但有問題的歷史在Firefox中。似乎更新window.location確實重定向了用戶，但也從歷史記錄中刪除了「源頁面」。這在不是發生在鉻，safari，ie8，ie8兼容性或ie7。

基於this response to another question我能夠創建一個解決辦法給下面的工作代碼+做了一些改動：

jQuery("#idofaelement").one("click", function(event) { 
    bitlyJSON(function(shortUrl) { 
     jQuery("#idofaelement").attr("href", function() { 
      //process shortUrl 
      //return finalized url;     
     }); 
     setTimeout(function() { 
      window.location = jQuery("#idofaelement").attr("href"); 
     }, 0); 
    }); 
    return false; 
}); 

感謝所有幫助！

Answer 2

iirc，jquery不會觸發A元素上的「點擊」。我會嘗試在回調中使用舊的「location.href = whatever」。

bitlyJSON(function(shortUrl) { 
     link.attr("href", function() { 
     //process shortUrl 
     //return finalized url;     
    }); 
    location.href = link.attr("href"); 
}); 

Answer 3

我想你真正想要的是return false;從點擊事件，以防止在href的實際追隨，對不對？

像：

jQuery("#idofaelement").click(function(event) { 
    //event.preventDefault(); //stop the click action 
    var link = jQuery(this); 
    bitlyJSON(function(shortUrl) { 
     link.attr("href", function() { 
     //process shortUrl 
     //return finalized url;     
     }).unbind().click(); 
    }); 
    return false; 
}); 

Answer 4

正如你概括自己：

event.preventDefault(); //stop the click action 

這意味着，瀏覽器是不打算去了URL，如果你想真正去期待已久的網址位置，只需執行如下操作：

document.location.href = longurl;