jQuery CLICK non si attiva (quando si passa al passaggio del mouse, funziona)

Question

Ho questo codice jQuery che ho scritto usando una funzione click.

Il codice deve funzionare con jQuery 1.7.2.

Ho un jsfiddle istituire qui: http://jsfiddle.net/7MpTa/1/

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

);

Quando si passa la funzione clic al passaggio del mouse, funziona. È solo la funzione click che non funziona. Ho provato a cambiarlo per legare e vivere, ma senza successo.

Ecco una demo del funzionamento hover: http://jsfiddle.net/8HL8k/1/

Qualcuno ha idea del perché non funziona?

modifica Grazie a tutti per le vostre risposte. Ovviamente funzionano tutti alla grande. Tuttavia, quando si implementano queste modifiche sul sito Web, gli eventi non vengono attivati ​​affatto (testati su FF, IE7 +, Chrome, Opera, Safari). Non c'è assolutamente nessun altro riferimento alle classi (palloncini & popup), quindi non sono sicuro di cosa potrebbe causare l'interferenza. Non riesco a pubblicare il link al sito web a causa di una rigida politica NDA. Sono tutti all'interno di una lista non ordinata (ul). Potrebbe essere causato da questa sintassi HTML? Se è così, ci sono dei modi per aggirarlo? Perché deve rimanere all'interno di come il codice viene utilizzato per centinaia di presentazioni in tutto il sito.

Ho anche provato a fare in modo che gli ancoraggi inviino un avviso al clic, per vedere se lo attiverebbe e non lo ha nemmeno attivato.

Lo script scritto deve essere chiamato prima del riferimento jQuery 1.7.2 all'interno della testa o dopo di esso, o nella parte inferiore completa del documento, prima del tag?

Answer 1

Si potrebbe utilizzare toggle() invece di click():

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

Come si può vedere qui: http://jsfiddle.net/darkajax/tmzt7/

Tuttavia tenere a mente toggle() è deprecato come di jQuery 1.8 ed è stato rimosso in 1.9, ma dal momento che stai usando 1.7.2, dovrebbe funzionare comunque ...

Ma, una scommessa soluzione ter sarebbe quella di utilizzare toggleClass():

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

Come si può vedere qui: http://jsfiddle.net/darkajax/GeSmx/

EDIT: rispondendo parte della tua seconda domanda/problema, il riferimento jQuery dovrebbe essere prima che tutti i metodi/funzioni utilizzando si ...

Answer 2

Usa toggle() non click

Working DEMO

Answer 3

Hover accetta una funzione on e una out in cui il clic richiede una sola funzione.

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

toggleClass avrà un passo fuori di aggiunta e la rimozione della classe.