Dynamically changing <TR> class with JQuery
This is my first post and first, please forgive me for my bad english.
I have a problem that I really cannot fix:
I have <table>
questions
-
the first question is visible (class: visible), the rest are hidden (class: hidden)
$(document).ready(function(){ $('.hidden').hide();
-
When people click on the first question, I want the second question to appear (and the first question is grayed out using the "done" class).
$('.visible:not(.done)').click(function(){
$(this).addClass('done');
$('.hidden:first').toggle(500).removeClass('hidden').addClass('visible');
})
The first question is now done (class: done) and the second question should be the only one that responds to the click () and so on ... But it doesn't work: the other <tr>
only appears when I click the 1st <tr>
.
Can someone give me a hand on this problem? Thanks.
a source to share
Since you are adding classes dynamically and the click event handler is a class selector, you will have to use an .live()
event.
$('.visible:not(.done)').live("click", function(){
$(this).addClass('done');
$('.hidden:first').toggle(500).removeClass('hidden').addClass('visible');
});
a source to share