Question

我正在尝试创建一个动态超链接，用于下载从服务器检索到的图像。

我正在使用的代码：

HTML：

<a class="btn" id="controlDownloadJPEG" download>Save & Download</a>

JS：

this.downloadJPEGClickHandler = function() {
    CollageCore.downloadJPEG(function(data){
        $("#controlDownloadJPEG").attr("href", "../file/fileStore.action?fileName=/" + data[0].AttachmentUrl);
    });;
    return true;
};

点击后href会发生变化，但链接本身会在我执行JavaScript之前链接到href集。第一次单击不执行任何操作，因为没有默认href，第二次单击将下载第一次单击应下载的内容。

我看到过使用JavaScript window.href的建议，而不是依赖于html标签本身。我需要使用html标签的原因是它的下载功能。

Answer 1

您正在处理异步调用，因为它是同步的。这就像订购一个交付披萨，并希望它一旦你下订单就在那里。除非你站在餐厅并且已经制作完成，否则这种情况不会发生。

当呼叫回来时，您需要取消点击并手动触发页面更改。所以你想使用window.location.href = "new path";而不是设置href。

this.downloadJPEGClickHandler = function() {
    CollageCore.downloadJPEG(function(data){
        window.location.href = "../file/fileStore.action?fileName=/" + data[0].AttachmentUrl;
    });
    return false;  //or preventDefault if you pass in event object
};

Answer 2

如果您要将此活动附加到onClick(event)处理程序，则应该可以通过传递event.preventDefault();

来停止重定向

引用：http://api.jquery.com/event.preventdefault/

Answer 3

阻止默认点击行为，更改href属性，然后模仿点击。应该工作。

$( "a" ).click(function( event ) {
  event.preventDefault();
  $("#controlDownloadJPEG").attr("href", "../file/fileStore.action?fileName=/" + data[0].AttachmentUrl);
  $(this).click();
});

如何在onclick事件期间更改href

3 个答案: