Click event handler and ready handler defined in different js file - not working
<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>
