Question

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 script 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');
    })
});

Answer 1

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!');
    });
});