jQuery和HTML5标签？

Question

I am currently developing a HTML5 page, so I want to use jQuery for some effects. Here's my code that doesn't seem to work:

The html code:

        <nav id="mainNavigation">
        <!--....-->
        </nav>

and now jQuery:

$('#mainNavigation').click(function(){
   alert("test");
});

For some reason, nothing is happening. When I try something like:

$(document).ready(function(){
    alert("test");
})

everything works fine.

Thank you for any help.

Answer 1

It sounds like you aren't wrapping your code in a document ready. This is basically telling the code to run with the DOM is ready.

Are you doing this:

$(document).ready(function() {
    $('#mainNavigation').click(function(){
        alert("test");
    });
});

As per motoxer4533's comment you can also do this via jQuery's shorthand Document ready:

$(function() {
    $('#mainNavigation').click(function(){
        alert("test");
    });
});

Answer 2

Try with:

$(document).ready(function(){ 
   $('#mainNavigation').click(function(){ 
     alert("test"); 
   });  
}) 

or

$(document).ready(function(){ 
   $('#mainNavigation').live('click', function(){
       alert("test"); 
   }); 
})

Answer 3

$(document).ready(function(){
     $('#mainNavigation').live('click', function(){
       alert("test"); 
   }); 
})