Question

I have these pages:

information.php

<div id='content'>Foo Bar</div>

main.php

<div id='main'></div>
<script type="text/javascript">
    $(document).ready(function() {
    $("#main").load("information.php");
    $("#content").click(function() {
        alert("Worked!");
    });
</script>

When I click on the <div> with id=content, loaded from information.php, nothing happens. The console of Chrome doesn’t report any errors either. If I manually put the content-div from information.php into my main.php page it all works fine. Why doesn’t it work when I use jQuery load?

The jQuery main script is loaded in the and all other jQuery functions I have made on the site works perfectly. It’s when I load another page into my main page that the IDs from the loaded page doesn’t work, or are not active of some sort.

Answer 1

The load-method hasn’t finished, when the click-handler should set to the div with the id ‘content’. Add a complete-handler as 2nd parameter to the load-method:

$(document).ready(function() {
    $("#main").load("information.php", function() {
        $("#content").click(function() {
            alert("Worked!");
        });
    });
});

Also see this example.