Jquery event handling code doesnt work after including script in head from an external js file

I included a script into my document's head that contains the following jquery code:

    $('.unappreciatedIcon').click(function() {
        alert('JS Works!');
    });

In the body of my document I have following:-

    <span class="unappreciatedIcon">.....</span>

But there is no alert displayed when I inserted the script into the document head from an external js file. When I had put this s开发者_开发百科cript in body simply below the target elements this worked flawlessly.

Thanks to you all:

I am getting this to work with the following code:

$(document).ready(function(){
    $('.unappreciatedIcon').click(function() {
        alert('fds');
    })
});

Did you wrap your jquery in a $(document).ready(function() { // your code // }); ?

If not your jquery code is executing immediately and the browser has not loaded your span. You need to wait for the document to be ready (using the code above) before assigning events.

Update

$(document).ready(function() {
    $('.unappreciatedIcon').click(function() {
        alert('JS Works!');
    });
});

When your script ran, it looked for an element having the class unappreciatedIcon. Nothing was found because the document is still being parsed and there was no node having the class unappreciatedIcon available in the document so far. The DOM is being constructed incrementally.

But when you put your script after the span element occurs, then $('.unappreciatedIcon') was found because it has been parsed and added to the DOM, so the click handler was tied to it.

Either run your code in a ready callback. The ready callback basically runs when the entire HTML has been parsed and the DOM is fully constructed which is usually a safe point to start running your JavaScript code that depends on the DOM.

$(document).ready(function() { 
    $('.unappreciatedIcon').click(...)
});

or put your code after the element occurs (don't need to wrap it inside the ready callback in this case),

<span class="someClass">..</span>
..
<script>
    $('.unappreciatedIcon').click(...)
</script>

just going to go with basics but did you make sure to include the jquery library? If it doesn't work and it's in the code you can also open in firefox with firebug go to the console tab and see what error you have.

The javascript is being processed before the page has finished rendering. As Erik Philips suggested, you need to put this statement inside your $(document).ready() function to ensure the page is loaded before the statement is evaluated.

$(document).ready(function(){
$('.unappreciatedIcon').click(function() {
 alert('JS Works!');
 });
});

here is the fiddle http://jsfiddle.net/Pf4qp/

Since HTML loads from top to bottom, the head loads before the rest of the page. You could solve this problem by putting the link to your js file right before the end tag. However, its generally better practice to put the javascript link in the head.

A better alternative is to use the defer attribute in the script tag.

For example:

<script type="text/javascript" src="script.js" defer></script>

or

<script type="text/javascript" src="script.js" defer="defer"></script>

The second option is kind of unneccessary though. This attribute is pretty well supported. Internet Explorer has supported it since version 5.5 though apparently it is "buggy" through IE9. It has been fully supported since FireFox 3.5, Chrome 8.0, Safari 5.0. It also works with all current mobile browsers. I guess it is not supported by any Opera browsers though.