Restrict jquery event to parent

[tules]

<script>
$(document).on("click", ".show", function(){

$('.div' + $(this).attr('target')).addClass('active-tab').siblings('.targetDiv').removeClass('active-tab');

$(this).addClass('active-appo').siblings('.show').removeClass('active-appo');

});
</script>


I have this code that I'm using to throw together my own version of tabbed tables. However, if I'm not actively making the target names for each tab unique, then I start running into problems when there are more than one of these tables in a thread. When you click on one tab, it flips all the tabs on the page to that tab (as long as their target names are the same). Is there a way to restrict clicks to the posts they're contained in?

[Todge]

I'm not entirely sure what you mean, but...

If you give your tabs unique IDs, you can target them directly.. Also, I see you are adding a click event to the document. Is there a reason you are not adding the click events to the tabs themselves?

[Chris]

Todge , I understand tules 's choice of using a delegate handler as a way to guard against some code coming along and deciding to change something in the post via innerHTML and killing every handler that was previously attached directly to the subtree or one of its branches

innerHTML creates a brand new subtree from the markup and sets the old tree adrift in memory space for garbage cleanup so unless your events are present in the markup (e.g the old netscape style onclick="blah" ) you become a victim of someone else's code --been there done that, not fun debugging

The issue however is that delegate handlers are meant to handle several items bearing some shared trait (including items created in the future if they carry those same traits) with a single uniform handler.  Generating unique IDs might work as a secondary trait if there was some relationship between the generated ID and the content but without seeing the HTML it appears the content is already being identified with a target attribute as the secondary trait and a class of "show" as the shared trait. A generated ID, like a generated target value,  still has no guard against some other code coming along and hitting the lottery generating the exact same value or perhaps purposely duplicating the value elsewhere to cause some unintended behavior. Best practices would probably be to keep all such references local within the  handler and traverse up or down instead of document-wide to mitigate those possibilities.

There should be an easy way to keep the jquery lookup results contained only to the post containing the tab that triggered the event by providing a context to the jquery lookup as in the following snippet

$('.div' + $(this).attr('target'), $(this).closest('article'))

which would limit the returned results to the post instead of the entire document.

The other issue I foresee would be consideration for the possibility of multiple tabbed tables appearing within a single post (I see no reason why not) in which case you may want to limit the context to some wrapper element around each individual tabbable table rather than a common ancestor element encompassing the entire post

[tules]

Chris Thank you so much! That was exactly what I needed!