Question

i have this main page

index.html

<script>
$(document).ready(function(){
    $("#content").load('page.html');

    $("#menu").click(function () {
       alert('Hello');
    });
});
<script>

<div id="content"></div>

and in page.html

<div id="menu">
    <ul>
        <li><a href="#">Link</a></li>
    </ul>
</div>

the .load is working ..
but the alert function is not working

must i but the function in page.html???
or there is another way ??

Answer 1

The problem is your code to bind to #menu runs before the sub-page is loaded. You need to either use on or do the bind inside the call back which runs once the load completes

$(document).ready(function(){
    $("#content").load('page.html', function() {
      $("#menu").click(function () {
         alert('Hello');
      });
    });
});

Version with on

$(document).ready(function(){
    $('#content').load('page.html');

    $('#content').on('click', '#menu', function() {
       alert('Hello');
    });
});