只有在執行某些事件後才能在鏈接中打開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