JQuery .click() event troubles

Question

Here's a snippet of my code:

    $(".item").click(function () {
        alert("clicked!");
    });

And I have (hypothetically; in actuality it's far more complicated) the following on my page:

<a href="#" class="item"><img src="1.jpg" /></a>

However, when I click the image, I do not get an alert.

What is my mistake?

Answer 1

Is your selector actually matching anything? Try using the jQuery debug plugin (http://jquery.glyphix.com/) and doing this:

$(".item").debug().click(function() {
    alert("clicked!");
});

.debug() will log whatever is matched to the Firebug console (you are using firebug, right? :-) ) without "breaking the chain" so you can use it inline like this.

If that turns out correctly, there may be some issue with the browser navigating to "#" before it can show your alert. Try using the .preventDefault() method on the event object to prevent this behavior:

$(".item").click(function(evt) {
    evt.preventDefault();
    alert("clicked!");
});

Answer 2

First question - are you adding the element to be clicked dynamically? If it is, you should use the live event since that will take care dynamically created elements.

http://docs.jquery.com/Events/live#typefn