Wie man jQuery click-Ereignis verwendet asynchron href Wert zu ändern, basierend auf einer JSON-Abfrage

Question

Ich bin mit dem bit.ly URL Verkürzung Service bestimmte URLs zu verkürzen, wird auf einen „Anteil auf Twitter gesendet "-Funktion. Ich mag die bit.ly URL nur geladen werden, wenn ein Benutzer tatsächlich die Share-Taste drückt (aufgrund bit.ly des max 5 parallel reqs Begrenzung). Bit.ly der REST-API ein JSON-Rückruf mit der verkürzten URL zurückgibt, das macht das ganze Szenario async.

Ich habe das versucht, nach dem Click-Ereignis zu stoppen, und warten Sie auf den JSON Aufruf einen Wert zurückgeben, bevor Sie den Klick zu starten.

ich die folgende vereinfachte Code in jQuery (document) .ready () haben:

Aktualisiert Code (stark vereinfacht)!

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

Und der folgende Code der bitly Verkürzung (funktioniert gut) zu behandeln:

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)

Der href erhält seinen Wert geändert, aber die endgültige .click () Ereignis wird nie ausgelöst. Dies funktioniert gut, wenn ein statischen Wert für den href definiert, aber nicht, wenn von der Asynchron-JSON-Methode.

Answer 1

@Tzury Bar Yochai wies mich in die richtige Richtung, indem darauf hindeutet, ich location.href verwenden zu aktualisieren die uRL. Auch @Victor half mit seiner Antwort.

Ich habe die Dinge ein bisschen arbeiten, um die Antworten kombiniert, hatte aber Probleme mit der Geschichte in Firefox. Es scheint, dass die Aktualisierung window.location in der Tat der Benutzer umgeleitet, sondern entfernt auch die " Quellseite“aus der Geschichte. Das hat nicht geschehen in Chrom, Safari, IE8, IE8-Kompatibilität oder IE7.

Basierend auf diese Antwort auf eine andere Frage konnte ich eine Abhilfe geben Sie den folgenden Arbeits Code + machte ein paar Änderungen erstellen:

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

Vielen Dank für die Hilfe!

Answer 2

Wie Sie sich vor:

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

Das heißt, BROWSER WIRD NICHT ZU DIESER URL , wenn Sie tatsächlich wollen, vorwärts gehen, um die langfris url Lage, einfach so etwas wie:

document.location.href = longurl;

Answer 3

iirc, jquery nicht auslösen "Klick" auf A-Elemente. Ich würde versuchen, alt gut „location.href = was auch immer“ in dem Rückruf.

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

Answer 4

Ich denke, was Sie wirklich wollen, ist aus dem Click-Ereignisse return false;, die tatsächliche Nachfolge des href zu verhindern, nicht wahr?

Wie:

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