Trigger click event on an audio download link

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.

score 1 · Answer 1 · edited May 23 '17 at 11:56

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?

trackDownload() is an Ajax function, hence its takes a bit of time to complete. Since this one triggers window.location = $(this).attr('href'); on the same thread, the link loads up and trackDownload() is broken halfway. — Clain Dsilva, Jan 10 '14 at 04:45

score 0 · Answer 2 · answered Jan 10 '14 at 04:34

<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>

score 0 · Accepted Answer · answered Jan 10 '14 at 06:10

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

  });

Assuming that the the link is within an element id #container. — Clain Dsilva, Jan 13 '14 at 14:25

Trigger click event on an audio download link

3 Answers3