代码之家 › 专栏 › 技术社区 › pavsaund

如何使用jquery click event基于json查询异步更改ref值

bit.ly href json jquery javascript

pavsaund · 技术社区 · 17 年前

我用的是 bit.ly url shortening service 以缩短发送到“share on twitter”功能的特定url。我只想在用户实际按下share按钮时加载bit.ly url(由于bit.ly的最大5个并行请求限制)。 Bit.ly's REST API 返回带有缩短的url的json回调,这使整个场景异步。

我已经尝试了以下操作来停止click事件,并等待json调用返回一个值,然后再启动click。

我在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的值已更改,但final.click()事件从未被触发。这在为Href定义静态值时很好,但在使用Async JSON方法时则不行。

4 回复 | 直到 9 年前

Tzury Bar Yochay 17 年前

正如你概述的那样:

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

也就是说, 浏览器不会转到那个url ,如果您希望实际转到长url位置,只需执行以下操作:

document.location.href = longurl;

user187291 17 年前

iirc,jquery不会触发元素的“click”。我会在回拨中尝试旧的“location.ref=whatever”。

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

Victor 17 年前

我想你真正想要的是 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;
});

Community Mohan Dere 9 年前

@Tzury Bar Yochay 建议我使用location.ref更新url,从而指向正确的方向。阿尔索 @Victor 帮助他回答。

我得到了一些结合答案的工作,但是在火狐的历史上有一些问题。似乎在更新 window.location 确实重定向了用户,但也从历史记录中删除了“源页面”。这样做了不在Chrome、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;
});

谢谢你的帮助!