JSONクエリに基づいてjQueryクリックイベントを使用してhref値を非同期的に変更する方法

Question

bit.ly URL短縮サービスを使用して、＆quot; share onに送信される特定のURLを短縮していますtwitter＆quot;関数。ユーザーが実際に共有ボタンを押したときにのみbit.lyのURLをロードしたいと思います（bit.lyの最大5つの並列要求の制限のため）。 Bit.lyのREST API は、短縮URLでJSONコールバックを返します。シナリオ全体が非同期になります。

クリックイベントを停止し、クリックを開始する前に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を使用して更新することを提案することで、正しい方向を示しました。 URL。また、 @Victor が答えを手伝ってくれました。

答えを組み合わせて、少しうまくいったことがありますが、firefoxの履歴に問題がありました。 window.location を更新すると実際にユーザーがリダイレクトされたようですが、＆quotも削除されたようです;ソースページ＆quot;歴史から。これは、クロム、サファリ、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

つまり、ブラウザはそのURLに移動しません。実際に長いURLの場所に移動したい場合は、次のようにします。

document.location.href = longurl;

Answer 3

iirc、jqueryは＆quot; click＆quot;をトリガーしませんA要素。古き良き＆quot; location.href = whatever＆quot;を試してみたいコールバックで。

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

Answer 4

hrefの実際のフォローを防ぐために、クリックイベントから return false; が実際に欲しいと思いますか？

いいね：

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