2010-12-11 4 views
1

Je n'arrive pas à comprendre pourquoi ce script ne se déclenchera pas après le premier clic. La fonction show() fonctionne parfaitement, mais hide() ne fonctionnera pas.jquery show()/Hide() ne se déclenche pas après le premier clic

<script type="text/javascript"> 
$(document).ready(function() { 
    $(".event.hidden").click(function() { 
     var div_id = this.id.replace(/But/, 'Div'); 
     $("#" + div_id).show('slow', 'linear'); 
     $(this).attr("src", "images/but_hide_event.png"); 
     $(this).removeClass('hidden').addClass('shown'); 
    }); 
    $(".event.shown").click(function() { 
     var div_id = this.id.replace(/But/, 'Div'); 
     $("#" + div_id).hide('slow'); 
     $(this).attr("src", "images/but_event_info.png"); 
     $(this).removeClass('shown').addClass('hidden'); 
    }); 
}); 
</script> 

La page en question est à http://randykrohn.com/schedules.php?Param=all

+0

Vous » re sélectionner les choses de manière inefficace. Vous ne devriez pas répéter deux fois le même code, juste les parties qui changent. Si vous pensez à la façon de le re-concevoir comme ça, la réponse devrait être évidente. – Incognito

Répondre

2

Vous devez utiliser la méthode .live(). Sur document prêt, vous liez .event.hidden mais il ne correspond à aucun élément. Une fois que vous avez exécuté la fonction show, vous devez réexécuter ce sélecteur. Plus simplement, vous pouvez utiliser .live():

Description: Joindre un gestionnaire à l'événement pour tous les éléments qui correspondent au sélecteur de courant, maintenant et dans l'avenir .

Modifier à

$(".event.hidden").live('click', function() { ... 

et si vous voulez alors être en mesure d'utiliser le spectacle à nouveau, vous aurez envie de faire un aussi ...

$(".event.shown").live('click', function() { ... 
+0

Merci beaucoup. Travaillé comme un charme. Je ne suis pas sûr d'avoir compris votre description concernant la connexion d'un gestionnaire. – dragboatrandy

+0

Pas de problème. La description était simplement copiée/collée à partir de l'API jQuery. Vous pouvez cliquer sur le lien .live() ci-dessus pour lire dessus. C'est une méthode vraiment utile. – macca1

1

Le problème est que vous attacher le comportement à l'événement click d'éléments avec la classe event et shown lorsque le DOM premier est prêt. C'est, une fois, sur le chargement de la page. Mais il semble qu'il n'y ait pas d'éléments avec .event.shown à ce moment-là, puisque vous échangez uniquement dans la classe shownaprès ce premier événement click sur les éléments avec .event.hidden.

Vous devriez revoir votre approche - ou si vous ne pouvez pas, vous aurez besoin d'utiliser .live() ou .delegate() pour surveiller les changements et dynamiquement attacher un comportement nouveau à ces événements click.

Questions connexes