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

Question

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

I need to trigger a download as well as trigger the JavaScript function trackDownload().

trackDownload() is an Ajax function, so ideally after completing the ajax call we need to trigger the download.

But unfortunately this does not happen. I believe its because the page navigates to the download link.

Is there a workaround? I did think of a JS function that does the tracking and redirect to link. But thought of taking a second opinion to stack overflow experts.

Answer 1

What can you do is attach even to button instead if link and return false for anchor

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');
}

if you want to open in new tab use window.open($('#myanchor').attr('href'));

DEMO

As specified that trackDownload() in comments that it is ajax function what you can do is

   $('#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
       }
}

But if you want to attach click event to link only then you can do the same, just attache the event to link

<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');
        });
    });

You can also look at this for more alternatives 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

Thanks for all the answers , It definitely did enlightened my hunt for the best solution.

@Raunak's answer is did find a solution for my question but the use of

onclick="return false;" 

on the anchor tag is however is not a right solution. Since it triggered multiple events on the Jquery dom engine.

What I really need was to prevent the default action of the link and call the ajax function.

So I have added event.preventDefault(); on the click event followed by the ajax function and loaded the download address after on the success event of ajax call.

  $('#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');
     });

  });