title: jquery .click only works when button is placed outside all div tags
body: <p>I'm trying to make a simple jquery toggle work. It's surprisingly complicated. </p>
  
  <p>This is my script, I placed it in the head of the document.</p>
  
  <pre><code>$(document).ready(function(){
      $("button").click(function(){
          $("#abc").toggle();
      });
  }); 
  </code></pre>
  
  <p>If I place the button anywhere but right after the <code>&lt;body&gt;</code> tag (like inside another div), nothing happens on click.</p>
  
  <pre><code>&lt;button&gt;Click me&lt;/button&gt;
  </code></pre>
  
  <p>jquery is loading properly (according to console).</p>
  
  <p>I have everything inside <code>document.ready</code>
  and there is a <code>div</code> with the <code>id="abc"</code> in my html file. </p>
  
  <p>what's wrong?</p>
  
  <p>i put the whole code in this fiddle <a href="http://jsfiddle.net/v97e8o5e/" rel="nofollow">http://jsfiddle.net/v97e8o5e/</a>
  and it works. 
  it still doesn't in mozilla on localhost/ (ubuntu server).</p>