Call a click on a newly added dom element

Question

Im trying to call a click on this newly created anchor:

$('.file-status').html("Finished downloading <a class='download' download href='#{fileEntry.toURL()}'>#{name}</a>")
$('.download').click()

But the click event is not called. Not sure why this is?

Im trying to force a download, not open the link in the browser. Like Dropbox does

EDIT

Here is the code, so its more clear:

fileEntry.createWriter ((fileWriter) ->
    fileWriter.onwriteend = (e) ->
        $('.file-status').html("Finished downloading <a class='download' download href='#{fileEntry.toURL()}'>#{name}</a>")
        $('.download').trigger('click');
    fileWriter.onerror = (e) ->
        console.log "Write failed: " + e.toString()
    fileWriter.write blob

), errorHandler

UPDATE:

So after understanding from the answers below that this is not really possible, except if the server sends the data to me with the header Content-disposition: attachment. But this seems to me like a realy bad solutions to pure HTML5 JS apps, that might be offline.

So I found this, that handles this super awesomely! It works great. Here is the link:

http://updates.html5rocks.com/2011/08/Saving-generated-files-on-the-client-side

Hope this helps someone that wants to do the same as I am sure there are many!

The user clicks on a link to download a file form the API, once the file is downloaded with the FILE API it creates this link. I want to start the download dialog for the user (as he clicked to download the file). It seems dumb to have the user click download, then once the file is downloaed click download file agian.. — Harry, Feb 14 '13 at 08:41

score 1 · Answer 1 · answered Feb 14 '13 at 08:38

1

Try binding the click event to the anchor tag and call click event.

$(".download").bind("click", function (e) {
            var $a = $(this);

                    window.location = $a.attr("href");

            });

 $(".download").click();

answered Feb 14 '13 at 08:38

Monie corleone

1,618
1
16
37

I have tried binding the click event to the element, it still does not call the click – Harry Feb 14 '13 at 08:41

Dimitar Dimitrov · Answer 2 · 2013-02-14T08:46:05.197

1

If I understood you correctly, you want to simulate a user click ? If that's the case, this is how you do it:

$('.file-status').html("Finished downloading <a class='download' download href='#{fileEntry.toURL()}'>#{name}</a>");

// simulate/trigger a click
$('.download').trigger('click');

edited Feb 14 '13 at 08:46

answered Feb 14 '13 at 08:40

Dimitar Dimitrov

14,868
8
51
79

Thanks, I have tried the trigger event but still the click is not called. – Harry Feb 14 '13 at 08:50

Jai · Answer 3 · 2013-02-14T08:49:50.673

1

You have not passed a event to the anchor, try this: http://fiddle.jshell.net/gnumA/

$('.file-status').html("Finished downloading 
                        <a class='download' onclick='alert(123);' href='#'>#{name}</a>")
$('.download').click();

update:

$('.download').click(function () {
    window.location.href = $(this).attr('href');
}).click();

edited Feb 14 '13 at 08:49

answered Feb 14 '13 at 08:42

Jai

74,255
12
74
103

Ok, this works. But in my example I have the attribute download set so that once clicked, the file download dialog starts. So how would this work then – Harry Feb 14 '13 at 08:45
Still, it opens the file in the browser if its a image or pdf etc – Harry Feb 14 '13 at 08:55

score 1 · Answer 4 · answered Feb 14 '13 at 08:46

1

Show user the downloading has been finished and then redirect to downloading after 1 sec.

$('.file-status').html("Finished downloading <a class='download' download href='#{fileEntry.toURL()}'>#{name}</a>");

setTimeout(function () {
   window.location.href = $('.download').attr('href');  
},1000);

answered Feb 14 '13 at 08:46

Jashwant

28,410
16
70
105

If the file is an image, the image will just be opened in the browser. I want to force a download – Harry Feb 14 '13 at 08:48
Most probably you need a server side language to force download. Javascript wont be help you in this regard. Look [here](http://stackoverflow.com/questions/6796974/force-download-an-image-using-javascript) – Jashwant Feb 14 '13 at 08:53
But I mean the download attribute in the tag will force the download if the user actually clicks on the link. – Harry Feb 14 '13 at 08:56
You can only simulate the `onclick` event of `anchor`. Not the navigation click. `$('.download').trigger('click')` will only call the javascript function associated with `$('.download')` but wont navigate for you. – Jashwant Feb 14 '13 at 09:00
So this is not possible? So this "force download" must actually come from the API? – Harry Feb 14 '13 at 09:03
Wait, here is an actual way to use the html5 API to do it: http://updates.html5rocks.com/2011/08/Saving-generated-files-on-the-client-side – Harry Feb 14 '13 at 09:11
There's one more html5 way in the link I provided in my first comment above. But you need to consider browser support for that – Jashwant Feb 14 '13 at 10:32

Antonio Papa · Answer 5 · 2013-02-14T09:02:19.387

0

Try this pluggin livequery

$('.download').livequery(function(){
    $(this).click();
});

edited Feb 14 '13 at 09:02

answered Feb 14 '13 at 08:46

Antonio Papa

1,596
3
20
38

I think your missing the point here. I want to programaticly click the link. The user can click it, thats not the problem – Harry Feb 14 '13 at 08:59

score 0 · Answer 6 · answered Jan 06 '16 at 10:55

0

Since this question is tagged with CoffeeScript here is a CoffeeScript valid answer (although still using jQuery).

itemId = $('.modal__product-info').attr('data-item-id')
$('#size-' + itemId).click()

answered Jan 06 '16 at 10:55

crmpicco

16,605
26
134
210

Call a click on a newly added dom element

6 Answers6

update: