jQuery selector not selecting

Question

I am unable to get this event to fire:

  $("#about").click(function()
  {  //I have put alert("foo") here, won't fire
    $("#about_stuff").toggle();
  });

snip

   <li ><a href="#a" id="about">About</a>

I've tested the toggle line in Firebug and it successfully works - I am at my wits end, I've checked it against multiple examples and it persistently refuses to work.

Answer 1

Do you by chance have another element with id="about" assigned to it? If so, the browser may only select the first. Try a few basic diagnostics:

alert($('#about').length);
alert($('#about').eq(0).attr('href'));

If still no joy, do you have a link to the dev site, or is it private?

Answer 2

From your code:
First, you have document.ready

$(document).ready(
  function()
  { // <-- start ready
  $("code").hide();
  }); // <-- end ready

Now, the following code isn't in document.ready, and written before the links have loaded. This is why the selector is empty when this code runs:

  $("#about").click(
  function()
  {  
  $("#about_stuff").toggle();
    return false;
  });

Answer 3

$("#about").click(function(e){  
    e.preventDefault(); // to prevent default event
    $("#about_stuff").toggle();
});