Question

<a href="http://www.somesite.com/sometrack.mp3" onclick="trackDownload('sometrack.mp3')">
    <button> Download </button>
</a>

我需要触发下载以及触发JavaScript函数trackDownload（）。

trackDownload（）是一个Ajax函数，理想情况下，在完成ajax调用后，我们需要触发下载。

但不幸的是，这不会发生。我相信它是因为页面导航到下载链接。

有解决方法吗？我确实想到了一个JS函数来跟踪和重定向链接。但是考虑采取第二种意见来堆叠溢出专家。

Answer 1

如果链接和return false用于锚

，您可以做什么甚至连接到按钮

<强> HTML

<a href="http://www.somesite.com/sometrack.mp3" onclick="return false;">
    <button id="button"> Download </button>
</a>

<强> Jquery的

$(function () {
    $('#button').on('click', function () {
        trackDownload();
        alert($(this).parents('a').attr('href'));
        window.location = $(this).parents('a').attr('href');
    });
});

function trackDownload() {
    alert('Track is getting download');
}

如果您想在新标签页中使用window.open($('#myanchor').attr('href'));

<强> DEMO

如同指定trackDownload（）在注释中它是ajax函数你可以做的是

   $('#button').on('click', function () {
        trackDownload($(this).parents('a')); // pass your link to this function

    });

function trackDownload(element) {
  $.ajax(
       url: 'yoururl',
       type: 'post',
       ... // all other parameter you want to pass
       success: function () { // success when ajax is completed
           window.location = element.attr('href'); // change url only when ajax is success
       }
}

但是，如果您想将点击事件附加到链接，那么您也可以这样做，只需将事件附加到链接

<a id='music' href="http://www.somesite.com/sometrack.mp3" onclick="return false;">
     <button> Download </button>
</a>

<强> JS

   $(function () {
        $('#music').on('click', function () {
            trackDownload();
            alert($(this).attr('href'));
            window.location = $(this).attr('href');
        });
    });

您还可以查看此更多替代方案How can I simulate a click to an anchor tag?

Answer 2

<a href="#" onclick="trackDownload('sometrack.mp3')">
    <button> Download </button>
</a>

<script>
    function trackDownload(file)
    {
        // other function body here....
        window.open('http://www.somesite.com/'+file, '_blank');
    }
</script>

Answer 3

感谢所有的答案，它确实启发了我对最佳解决方案的追求。

@ Raunak的回答确实找到了我的问题的解决方案，但使用了

onclick="return false;"

然而，锚标签上的

不是正确的解决方案。因为它在Jquery dom引擎上触发了多个事件。

我真正需要的是阻止链接的默认操作并调用ajax函数。

所以我在click事件上添加了event.preventDefault();，然后是ajax函数，并在ajax调用成功事件之后加载了下载地址。

  $('#container a').click(function(event){
     event.preventDefault(); // This is what is different from @Raunak's answer

     var el = $(this); // $(this).href may not be valid inside ajax function
                       // due to disambiguation of $(this) 
                       // hence storing the element on a local veriable

     $.post('http://someURL', { info: someInfo})
     .done(function(data) {
        location.href = el.attr('href');
     });

  });

在音频下载链接上触发单击事件

3 个答案: