title: Click event handler and ready handler defined in different js file - not working
body: <p>click event handler on add button is not working if i do following(click event defined in add.js and ready event is present in index.js).</p>
  
  <p>If i put click event handler and ready handler in index.js, click event works (alert popup).</p>
  
  <p>Please help me.</p>
  
  <p>Note: #add_button is a static button ( present in index.php, not a dynamic div, i tried live instead of click but that doesn't work too).</p>
  
  <p><b> This doesn't work </b></p>
  
  <pre><code>&lt;script src="js/index.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="js/add.js" type="text/javascript"&gt;&lt;/script&gt;
  </code></pre>
  
  <p><b>index.js</b></p>
  
  <pre><code>$(document).ready(function() {
  //code
  });
  </code></pre>
  
  <p><b>add.js</b></p>
  
  <pre><code>$('#add_button').click(function(event){
   alert('hello');
  });
  </code></pre>
  
  <p><b>this works if add.js content is directly put into index.js ? </b></p>
  
  <pre><code>$(document).ready(function() {
  //code
  $('#add_button').click(function(event){
   alert('hello');
  });
  });
  </code></pre>