仅在某些事件执行后才在 link 中打开 href

Question

我有一个 link 到 Tumblr 共享小部件，需要在它打开之前向其附加一些查询字符串参数（通过单击 link 触发）。但是，link 在附加这些参数之前打开，我想是因为这需要几秒钟——我在页面上发送图像以托管在 imgur 上并返回 URL。

有什么方法可以延迟打开新的 link 直到我的新图像 url 被返回？？？我试过使用 e.preventDefault(); 和 return false; 但没有成功。

我的HTML是：

<button id='tumblrshare'>tumblr</button


$('body').on('click','#tumblrshare',function(e){
var svg = $("#svg")[0];
svg.toDataURL("image/png", {
    callback: function(img) {
    var img = img.replace("data:image/png;base64,", "");
    var imgurTitle = $("meta[property='og:title']").attr("content");
    $.ajax({ 
          url: 'https://api.imgur.com/3/image',
          headers: {'Authorization': 'Client-ID **********'},
          type: 'POST',
          data: {'image': img, 'type': 'base64', 'title': imgurTitle},
          success: function(result) { 
          imageURL = result.data.link;
          window.location = 'https://www.tumblr.com/widgets/share/tool?canonicalUrl=http://www.example.com&caption=mycaption&posttype=photo&content=' + imageURL;
          },
          error: function(){
            console.log('error');
          }
    }); //ajax
  }//callback

});//svg

}); //tumblrshare

请帮忙！！

Answer 1

更改 link 的 'href' 属性不会更改其已被单击后的目的地。考虑在 ajax 调用完成后使用 window.location 重定向用户。

$('body').on('click','#tumblrshare',function(e){
   e.preventDefault(); // Stop the default behaviour
   ...
   $.ajax({
    success: function(result){
      window.location = result.data.link;
    },
    ...
  });
...
});

Answer 2

function loadTumblr(){
    var svg = $("#svg")[0];
    svg.toDataURL("image/png", {
        callback: function(img) {
            var img = img.replace("data:image/png;base64,", "");
            var imgurTitle = $("meta[property='og:title']").attr("content");
            $.ajax({ 
                url: 'https://api.imgur.com/3/image',
                headers: {'Authorization': 'Client-ID **********'},
                type: 'POST',
                data: {'image': img, 'type': 'base64', 'title': imgurTitle},
                success: function(result) { 
                    imageURL = result.data.link;
                    window.location.href = 'https://www.tumblr.com/widgets/share/tool?canonicalUrl=http://www.example.com&caption=mycaption&posttype=photo&content=' + imageURL;
                },
                error: function(){
                    console.log('error');
                }
            }); //ajax
        }//callback
    });//svg
}

Answer 3

   $("a.alate").on("click",function(event){
 _thislink = $(this).attr("href");
event.preventDefault();
 console.log(_thislink);
$.ajax({
    type: 'get',
    url : 'https://restcountries.eu/rest/v1/all',
   fail:function(data) {
   console.log("fail");
  }
 }).done(function(data) {
  //  when request finish 
   console.log(data);
   //   window.location = _thislink;
 });
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a class="alate" href="http://whosebug.com">Update Data then go</a>

最重要的代码使用

e.preventDefault();

停止 href 的默认行为

仅在某些事件执行后才在 link 中打开 href

Open href in link only after certain events have executed

javascript

jquery

href

preventdefault