Javascript within AJAX loaded pages

Question

I have a main (index) page which loads pages dynamically and places them inside it's div but the Javascript within those pages doesn't execute. Specifically this part

<script type="text/javascript">
    $(document).ready(function(){

        $('#regForm').submit(function(e) {
            register();
            e.preventDefault(); 
        }); 
    });
</script>

Dynamic loaded content does not execute inline script tags, see Sarfraz answer for a solution. — adeneo, Apr 30 '12 at 11:24
please show the full code of your javascript and ajax so i can edit it — Ravi Jethva, Apr 30 '12 at 11:40
possible duplicate of [Can scripts be inserted with innerHTML?](http://stackoverflow.com/questions/1197575/can-scripts-be-inserted-with-innerhtml) — Quentin, Apr 30 '12 at 11:48

score 2 · Accepted Answer · answered Apr 30 '12 at 11:23

You will have to use getScript like this:

$('#foo').load('bar.html', function(){
    $.getScript("js/fileName.js");
    // call a function from fileName.js
});

You will have to put your JS code in that file and call that via getScript and then you can call functions from it as shown above.

score 2 · Answer 2 · answered Apr 30 '12 at 11:25

2

Write your javascript in the index.php or write at the bottom of loaded page without document.ready

answered Apr 30 '12 at 11:25

jumancy

1,290
1
9
16

score 1 · Answer 3 · answered Apr 30 '12 at 11:25

This is in reality a cross-browser issue: When <div>s are dynamically filled with HTML containing <script> tags, these scripts may or may not run - and this behaviour is different not only between browsers, but also between browser versions.

The only workaround I know of is to extract your JS, send it seperately and execute it after the <div> content has been set.

Javascript within AJAX loaded pages

3 Answers3