title: jQuery selector intermittent working, why?
body: <p>I simply want to manipulate the elements within the <code>#content</code> div, but <code>$('#content')</code> doesn't seem to work, and yet in other places it does! My relevant code is very simple:</p>
  <h2>HTML</h2>
  <pre><code>&lt;body&gt;
    &lt;input type='button' value='Save design' id='save'  /&gt;
    &lt;div id=&quot;content&quot; style=&quot;height: 200px; width:600px;border: 1px solid black;&quot; class='whatev'&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  <h2>Script</h2>
  <pre><code>$(document).ready(function(){   
     $('#save').click(function(e){
       alert( document.getElementById('content').id); // this works!
       alert($(&quot;#content&quot;).length); // this works! it outputs &quot;1&quot;
       alert($(&quot;#content&quot;).id); // this does NOT work - undefined, why?
       //end save function
     });
  
      $('#content').click(function(e){ 
         // do stuff // ALL of this works!
      });
  });
  </code></pre>
  <p>That is it. If you notice, it does work in some places (the entire click function bound to it is perfectly fine), but where it doesn't work, it strangely does still exist because <code>length = 1</code>. I tried using context as well to search the div, just in case, (using <code>$('#content','body')</code>), but no use.</p>