skip click function based on dynamically assigned class value

Question

I have a table that reveals further details of a record when its is clicked. The details reside in a child div with the class 'description'. I've got the exposure toggling just fine, but I would like to avoid having the click function called on elements that have already been exposed (i.e. i don't want to re-display what's already being displayed).

I've tried .bind and .live with no luck. Basically, I'm hoping there's some way to allow the new class assignment to be 'activated' in the DOM.

Thanks in advance for your help!

jQUERY

$(document).ready(function(){

        $('#libraryBrowser tbody tr:not(.exposed)').click(function(){
            $('.exposed').slideUp('fast');                                                          //hide previously shown element
            $(this).find('div.description').slideToggle('slow').addClass('exposed');                //show selected item's description, flag exposure
        });

});

Do you want the element's that have already been exposed (and possibly hidden afterwards) not to have the ability to be exposed again? Or maybe it's the other way around - and you're actually experiencing it, and you don't want it? (that's how the code looks) — ub1k, Jun 13 '11 at 16:47
no, they should be retriggerable. it's being applied to a table row-- when the user clicks, they get more information. If they click on something else, the previous element's 'more' content is hidden and the new row's information is shown. this particular question is specifically about keeping the effect from reloading if the user clicks on a row that is already expanded. — sdowswell, Jun 16 '11 at 11:59

score 0 · Accepted Answer · answered Jun 13 '11 at 16:43

i don't want to re-display what's already being displayed

You can use is with :visible filter selector to see if an element is already visible and if it is, you simply need to exit out of the function using return false something like this:

if ('.yourelementclass').is(':visible')){
  return false;
}

You need to put in that code just before the code where you actually show the image.

skip click function based on dynamically assigned class value

1 Answers1