JQuery .click() event troubles

Question

Here's a snippet of my code:

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

And I have (hypothetically; in actually 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

Use bind.

$(".item").bind("click", function(e) { ... });

Answer 2

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 3

modifying the selector?

$(".item > img")

Answer 4

I had this problem recently after adding a context menu jquery plugin. The pluging was binding to the click event of the body and then unbinding click event - it seemed to remove all bindings to click event for all elements. Maybe a suggestion to turn off plugins or check you're not unbinding click for a parent element yourself.

Answer 5

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

Answer 6

The code you have posted is correct, so I suspect there's something else going on that you haven't considered.

Firstly, if there was an error somewhere (even not in that exact bit of code) that might cause it to stop working. Put an alert just after this line to check that it runs.

Check that no other elements are catching the event and stopping it from propagating. This has bitten me before in the past... If there's anything else handling a click which has stopPropagation() or return false in it, that might be the problem.

Answer 7

One thing I've found (though only with links going elsewhere) is that adding return false; in may help, if it's just firing the anchor off instead of evaluating the alert. I can't really say why this would be the case, but that's a solution I found to a similar problem recently.