jQuery use .on(load) with ajax loaded content

Question

I have a webpage with AJAX loaded content. If I click on "export" the content reloads and generate an HTML a-Element using PHP:

<a style=\"display:none;\" id=\"menue-export-link\" href=\"download/".$this->select->downloadcsv."\"></a>

Now I want to start the download automatically, so I wrote the following JavaScript code to start the download on a-Element load:

$(document).ready(function () {
    $(document).on('load', '#menue-export-link', function() {
        console.log('click export');
        $('#menue-export-link').click();
        $('#menue-export-link').remove();
    });
});

But nothing happens, does somebody have any idea?

Use [trigger](http://api.jquery.com/trigger/) – Bugfixer Sep 07 '15 at 10:18 — Bugfixer, Sep 07 '15 at 10:18

score 0 · Answer 1 · edited Sep 07 '15 at 10:34

0

$(document).on("click", "#menue-export-link", function() {
  console.log("click export");
});

edited Sep 07 '15 at 10:34

SuperBiasedMan

9,814
10
45
73

answered Sep 07 '15 at 10:02

Paul Booblick

363
1
7

I think she/he wants to avoid a click, but wants to trigger the download once the link has actually been loaded. – The F Sep 07 '15 at 10:03
Anyway, dynamically created elements needs trigger as above – Paul Booblick Sep 07 '15 at 10:06

score 0 · Answer 2 · answered Sep 07 '15 at 10:02

0

Your js is triggered when your main page is loaded and #menue-export-link probably does not exist to that time. If using $.ajax to load that link, place your javascript inside the success callback to make sure that your link exists or is being loaded before triggering your code.

answered Sep 07 '15 at 10:02

The F

3,647
1
20
28

Thanks, it was actually to easy :D – Philipp Nies Sep 07 '15 at 10:28
I resolved it like this: ` if($('#menue-export-link').length) { console.log('click export'); $('#menue-export-link').click(); } ` – Philipp Nies Sep 07 '15 at 10:31
Glad it works. However, next time try to solve it using the tools given by jQuery. We could help you more if you'd share your actual ajax call. Ashraf shared some nice recources as well. – The F Sep 07 '15 at 10:33

score 0 · Accepted Answer · edited May 23 '17 at 12:22

0

First of all there is no load or onload event for html anchor elements. So as @The F said you have to trigger the download in your ajax success callback. Remember to find and trigger it after you have appended the html in your DOM. For more on jQuery ajax http://api.jquery.com/jquery.ajax/

And now comes triggering the download part. Triggering the click event which causes the navigation is a bit trickier. The following question answers that very well jQuery: how to trigger anchor link's click event and How can I simulate an anchor click via jquery?

edited May 23 '17 at 12:22

Community

1
1

answered Sep 07 '15 at 10:28

Ashraf Purno

1,065
6
11

Thanks a lot :-) This was the next problem. I resolved it with the specification of the element Index: `$('#menue-export-link')[0].click(); ` – Philipp Nies Sep 07 '15 at 10:37
I actually faced the same problem triggering anchor element's click event :) – Ashraf Purno Sep 07 '15 at 10:58

jQuery use .on(load) with ajax loaded content

3 Answers3