Trigger HTML5 download using jQuery or Javascript

Question

I expected the buttong at the HTML code to download the image that is downloading the anchor when pressed.

 $('.foo').on('click', function() { $('a').trigger('click'); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="//www.gravatar.com/avatar/b6640a9a125eb5cf2bc47ddc17b8ee7a?s=328&d=identicon&r=PG" download>Click here to download image</a> <button class="foo"> I expected this button to download also de image </button> 

Answer 1

you need to call click on the dom element.

 $('.foo').on('click', function() { $('a')[0].click(); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="//www.gravatar.com/avatar/b6640a9a125eb5cf2bc47ddc17b8ee7a?s=328&d=identicon&r=PG" download>Click here to download image</a> <button class="foo"> I expected this button to download also de image </button> 

Answer 2

As well documented in triggering-event-handlers :

jQuery's event handling system is a layer on top of native browser events. When an event handler is added using .on( "click", function() {...} ), it can be triggered using jQuery's .trigger( "click" ) because jQuery stores a reference to that handler when it is originally added. Additionally, it will trigger the JavaScript inside the onclick attribute. The .trigger() function cannot be used to mimic native browser events, such as clicking on a file input box or an anchor tag. This is because, there is no event handler attached using jQuery's event system that corresponds to these events.

From this:

How can I mimic a native browser event, if not .trigger()? In order to trigger a native browser event, you have to use document.createEventObject for < IE9 and document.createEvent for all other browsers. Using these two APIs, you can programmatically create an event that behaves exactly as if someone has actually clicked on a file input box. The default action will happen, and the browse file dialog will display.

The jQuery UI Team created jquery.simulate.js in order to simplify triggering a native browser event for use in their automated testing. Its usage is modeled after jQuery's trigger.

This jQuery project is no more active, but, in any case, it's very interesting.

Therefore:

 $(function () { $('.foo').on('click', function() { $('a').simulate('click'); }) }); 

 <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script> <script src="https://cdn.rawgit.com/jquery/jquery-simulate/master/jquery.simulate.js"></script> <a href="//www.gravatar.com/avatar/b6640a9a125eb5cf2bc47ddc17b8ee7a?s=328&d=identicon&r=PG" download>Click here to download image</a> <button class="foo"> I expected this button to download also de image </button>