Dynamique changement de classe de <TR> avec Jquery

Question

Ceci est mon premier post, et d'abord s'il vous plaît pardonnez-moi pour mon mauvais anglais.

J'ai un problème que je ne peux pas résoudre:

J'ai <table> des questions,

1. la première question est visible (classe: visible), les autres sont cachés (classe : caché)

    $(document).ready(function(){ 
        $('.hidden').hide(); 
   

2. Lorsque les utilisateurs cliquent sur la première question, je veux la deuxième question apparaisse (et la première question à se tourner vers gris, en utilisant un « fait » clas s).

$('.visible:not(.done)').click(function(){ 
       $(this).addClass('done'); 
       $('.hidden:first').toggle(500).removeClass('hidden').addClass('visible'); 
      }) 

La première question est maintenant fait (classe: fait) et la 2ème question devrait être le seul à réagir à un clic(), et ainsi de suite ... Mais ne fonctionne pas: les autres <tr> n'apparaissent que lorsque je clique sur le 1er <tr>.

Quelqu'un peut-il me donner un coup de main sur ce problème? Merci.

Answer 1

Étant donné que vous ajoutez dynamiquement les classes et que votre gestionnaire d'événements de clic est un sélecteur de classe, vous devez utiliser l'événement .live().

$('.visible:not(.done)').live("click", function(){ 
    $(this).addClass('done'); 
    $('.hidden:first').toggle(500).removeClass('hidden').addClass('visible'); 
}); 

Working Demo