execute javascript function after load content with ajax

Question

I have one HTML dashboard page and I use ajax for loading other content to it. All is working fine and it shows my other pages but the problem is after it loads new content my javascript codes in new page not working

this is my div in the dashboard page

<div id="ajax_load">

</div>

and it's my ajax code

$(document).ready(function() {
    $("#ajax_load").load("./profile.html");
});

and it's my porfile page

<h1>hi</h1>
<script>
$(document).ready(function() {
    alert('hi');
 });

</script>

and the problem is that alert in profile page not work after load

Check out [jQuery .load() call doesn't execute JavaScript in loaded HTML file](https://stackoverflow.com/questions/889967/jquery-load-call-doesnt-execute-javascript-in-loaded-html-file) — Erik Terwan, May 13 '19 at 12:03

dwpu · Accepted Answer · 2019-05-13T12:24:09.070

1

Move your scripts from your page (inline script) to a separate js file.

edited May 13 '19 at 12:24

answered May 13 '19 at 12:12

dwpu

258
3
19

score 0 · Answer 2 · answered May 13 '19 at 12:28

If you will try to open your dashboard page with Firefox or Microsoft Edge you will see that everything work perfectly fine, the problem I think is a CORS problem (because you try to load locally) , you can read more here

AJAX request to local file system not working in Chrome?

For this AJAX request to work in Chrome you need to make the request to a webserver. If you're on Windows you can easily install IIS or WAMP on your local machine.

execute javascript function after load content with ajax

2 Answers2