如何使用jQuery click事件基于JSON查询异步更改href值 [英] How to use jQuery click event to change href value asynchronously, based on a JSON query

问题描述

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

我尝试了以下命令来停止click事件，并等待JSON调用在启动点击之前返回一个值。 / p>

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

更新代码（过度简化）！

  jQuery（＃idofaelement）。click（function（event）{
 event.preventDefault（）; //停止点击动作
 var link = jQuery（this）; 
 bitlyJSON（function（shortUrl）{
 link.attr（href，function（ ）{
 //处理shortUrl 
 //返回最终的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）;} 
}否则if（i ==results）{
 func（entry [longUrl] .shortUrl）;} 
 }）; 
}）; 
}（jQuery）
  

href的值改变了，但是最终的.click（ ）事件永远不会被解雇。这在为href定义静态值时工作正常，但在使用异步JSON方法时则不行。

解决方案

@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）; 
}）; 
返回false; 
}）; 
  

感谢您的帮助！

I'm using the bit.ly url shortening service to shorten certain url's being sent to a "share on twitter" function. I'd like to load the bit.ly url only when a user actually presses the share button (due to bit.ly's max 5 parallel reqs limitation). Bit.ly's REST API returns a JSON callback with the shortened url, which makes the whole scenario async.

I've tried the following to stop the click event, and wait for the JSON call to return a value before launching the click.

I have the following simplified code in jQuery(document).ready():

Updated code (oversimplified)!

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

And the following code to handle the bitly shortening (works just fine):

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)

The href gets its value changed, but the final .click() event never gets fired. This works fine when defining a static value for the href, but not when using the async JSON method.

解决方案

@Tzury Bar Yochay pointed me in the right direction by suggesting I use location.href to update the url. Also @Victor helped with his answer.

I got things kinda working combining the answers, but had issues with the history in firefox. Seems that updating window.location indeed redirected the user, but also removed the "source page" from the history. This did not happen in chrome, safari, ie8, ie8-compatibility or ie7.

Based on this response to another question I was able to create a workaround giving the following working code + made a few changes:

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

Thanks for all the help!

这篇关于如何使用jQuery click事件基于JSON查询异步更改href值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！