Как использовать событие щелчка jQuery для асинхронного изменения значения href на основе запроса JSON

Question

я использую Bit.ly сервис сокращения URL-адресов чтобы сократить определенные URL-адреса, отправляемые в функцию «Поделиться в Твиттере».Я хотел бы загружать URL-адрес bit.ly только тогда, когда пользователь действительно нажимает кнопку «Поделиться» (из-за ограничения bit.ly на максимальные 5 параллельных запросов). REST API Bit.ly возвращает обратный вызов JSON с сокращенным URL-адресом, что делает весь сценарий асинхронным.

Я попробовал следующее, чтобы остановить событие щелчка, и дождался, пока вызов 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 действительно перенаправило пользователя, но и удалило " ; исходная страница " из истории. Это не произошло в chrome, safari, ie8, ie8-совместимости или 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 не вызывает " щелчок " на элементы. Я бы попробовал старый добрый " location.href = что угодно " в обратном вызове.

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

Answer 4

Я думаю, что на самом деле ты хочешь, чтобы 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;
});