只有在执行某些事件后才能在链接中打开href

Question

我有一个链接到Tumblr共享窗口小部件，并且需要在它打开之前附加一些查询字符串参数（点击链接触发）。但是，链接在添加这些参数之前打开，我认为这是因为它需要几秒钟 - 我要在页面上发送图像以在imgur上托管并返回该URL。

有什么办法可以延迟新链接被打开，直到我的新图像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

更改链接的“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://stackoverflow.com">Update Data then go</a>

在你的代码中最重要的是使用

e.preventDefault(); 

停止的HREF