如何使用jQuery click事件基于JSON查询异步更改href值

Question

我正在使用 bit.ly网址缩短服务来缩短某些网址被发送到“分享” Twitter并QUOT;功能。我只想在用户实际按下共享按钮时加载bit.ly url（由于bit.ly的max 5 parallel reqs限制）。 Bit.ly的REST API 返回带有缩短网址的JSON回调，这使整个场景异步。

我已尝试以下操作来停止click事件，并在启动点击之前等待JSON调用返回一个值。

我在jQuery（document）.ready（）中有以下简化代码：

更新了代码（过度简化）！

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

以下代码来处理缩短的缩短（工作得很好）：

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的值已更改，但最终的.click（）事件永远不会被触发。这在为href定义静态值时工作正常，但在使用异步JSON方法时则不行。

Answer 1

@Tzury Bar Yochay 通过建议我使用location.href来更新，向我指出了正确的方向网址。 @Victor 也帮助他回答了问题。

我得到的东西有点结合答案，但在Firefox中有历史问题。似乎更新 window.location 确实重定向了用户，但也删除了“ ;源页面“从历史来看。这确实在chrome，safari，ie8，ie8-compatibility或ie7中发生不。

基于对其他问题的回复我能够创建一个解决方法，给出以下工作代码+做了一些更改：

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

正如你自己概述的那样：

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

这意味着，浏览器不会访问该网址，如果您希望实际前往长网址，只需执行以下操作：

document.location.href = longurl;

Answer 3

iirc，jquery不会触发“点击”在A元素上。我会尝试旧的“location.href = whatever”在回调中。

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

Answer 4

我认为你真正想要的是从click事件返回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;
});