Jquery event handling code doesnt work after including script in head from an external js file
<p>I included a script into my document's head that contains the following jquery code:</p>

<pre><code>    $('.unappreciatedIcon').click(function() {
        alert('JS Works!');
    });
</code></pre>

<p>In the body of my document I have following:-</p>

<pre><code>    &lt;span class="unappreciatedIcon"&gt;.....&lt;/span&gt;
</code></pre>

<p>But there is no <code>alert</code> displayed when I inserted the script into the document head from an external js file. When I had put this script in body simply below the target elements this worked flawlessly.</p>

<hr>

<h2>Thanks to you all:</h2>

<p>I am getting this to work with the following code:</p>

<pre><code>$(document).ready(function(){
    $('.unappreciatedIcon').click(function() {
        alert('fds');
    })
});
</code></pre>
