jQuery 클릭 이벤트를 사용하여 JSON 쿼리를 기반으로 href 값을 비동기적으로 변경하는 방법

Question

나는 bit.ly URL 단축 서비스 특정 URL이 "트위터에 공유" 기능으로 전송되는 것을 단축합니다.사용자가 실제로 공유 버튼을 누를 때만 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 URL을 업데이트하기 위해 location.href를 사용하도록 제안함으로써 올바른 방향으로 나를 가리 켰습니다. 또한 @승리자 그의 대답에 도움이되었습니다.

나는 답을 결합시키는 일이 있었지만 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로 가지 않습니다, 실제로 장거리 위치로 넘어 가려면 다음과 같은 것을하십시오.

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