jQuery CLICK event not firing (when switching to hover, it does work)

Question

I have this jQuery code I've written using a click function.

The code must be working with jQuery 1.7.2.

I have a jsfiddle set up here: http://jsfiddle.net/7MpTa/1/

$(document).ready(
function () {
    $(".balloons a").hover(
        function() {
            $(this).next('.popups').addClass("shown");
        },
        function() {
            $(this).next('.popups').removeClass("shown");
        }
    );
}

);

When I switch the click function to hover, it works. It's just the click function itself that doesn't work. I've tried changing it to bind, and live, but no success.

Here's a demo of the hover working: http://jsfiddle.net/8HL8k/1/

Anybody have any idea why it isn't working?

edit Thanks everyone for your answers. They obviously all work great. However, when implementing these changes onto the website, the events just aren't being triggered at all (tested on FF, IE7+, Chrome, Opera, Safari). There is absolutely no other reference anywhere to the classes (balloons & popups), so I'm not sure what could cause the interference. I cannot post the link to the website because of a strict NDA policy. The are all inside an unordered list (ul). Could it be caused by this HTML syntax? If so, are there ways around it? Because it must remain inside the as the code is being used for hundreds of slideshows throughout the site.

I've also tried getting the anchors to send out an alert on click, to see if it would trigger it, and it didn't trigger it either.

Should the written script be called before the jQuery 1.7.2 reference inside the head or after it, or at the complete bottom of the document, before the tag?

Answer 1

You could use toggle() instead of click():

$(".balloons a").toggle(
    function() {
        $(this).next('.popups').addClass("shown");
    },
    function() {
        $(this).next('.popups').removeClass("shown");
    }
);

As you can see here: http://jsfiddle.net/darkajax/tmzt7/

However keep in mind toggle() is deprecated as of jQuery 1.8 and was removed in 1.9, but since you're using 1.7.2, it should work anyways...

But, a better solution would be to use toggleClass():

$(".balloons a").click(
    function() {
        $(this).next('.popups').toggleClass("shown");
    }
);

As you can see here: http://jsfiddle.net/darkajax/GeSmx/

EDIT: answering part of your second question/issue, the jQuery reference should be before all of the methods/functions using it...