JQuery CLICK event does not fire (when switching to hang it works)

Question

I have this jQuery code that I wrote using the click function.

The code should work with jQuery 1.7.2.

I have jsfiddle created 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 freeze, it works. This is just a click function that doesn't work. I tried to change it to a binding and live, but without success.

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

Can anyone understand why it is not working?

edit Thank you all for your answers. Obviously, they all work great. However, when these changes are implemented on the website, events simply do not fire at all (tested on FF, IE7 +, Chrome, Opera, Safari). There is absolutely no reference to classes (balloons and pop-ups), so I'm not sure what can cause interference. I can’t post a link to the site due to the strict NDA policy. All of them are in an unordered list (ul). Could this be caused by HTML syntax? If so, are there any ways around it? Because it has to stay inside, as the code is used for hundreds of slide shows throughout the site.

I also tried to force the anchors to send a warning when pressed to check if he would call it, and he also did not call it.

Should a written script be called before the jQuery 1.7.2 link inside the head or after it or on the entire bottom of the document before the tag?

Answer 1

You can 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() deprecated from jQuery 1.8 and was removed in 1.9, but since you are using 1.7.2, it should work anyway ...

But a better solution would be 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 / question, the jQuery reference should be in front of all methods / functions using it ...

Answer 2

The hover accepts an on and out function, where, since a click accepts only one function.

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

toggleClass will take you step by step to add and remove a class.

Answer 3

Use toggle() not click

Working demo