Jquery selector doesn't work

Question

The code

<script type="text/javascript" src="jquery/jquery-1.8.0.js"></script>  
<script type="text/javascript">  
$(document).ready(function() {  
    alert("Hello!");  
});  
$(".demo").click(function() {  
    alert("I am demo");  
});  
</script>  
<body>  
    <button class="demo">click me</button>  
</body>  

The first Hello! is OK, but I am demo can't?What's the matter?

the similar question jquery each selector doesnt work

Answer 1

Your click event handler is trying to bind to the demo button before the HTML body has rendered. You need to assign the event handler inside your $(document).ready function:

Change this:

$(document).ready(function() {  
    alert("Hello!");  
});  
$(".demo").click(function() {  
    alert("I am demo");  
});

To this:

$(document).ready(function() {  
    alert("Hello!");  
    $(".demo").click(function() {  
        alert("I am demo");  
    });
});