OK, so you have to independently assign a handler to all descendant
elements in the <div>? Is there no better way via the parent div?
On Feb 20, 8:07 am, Liam Potter <radioactiv...@gmail.com> wrote:
> $(document).ready(function () {
> $("div.clickable_element p").click( function () {
> $(this).parents("div.clickable_element").toggleClass("selected");
> });
>
> });
> spaceage wrote:
> > A question re: event handling/propagation: I have a surrounding <div>
> > and I want any click within the <div> (including a click on any
> > element within the div) to toggle the addition/removal of a class on
> > the <div>.
>
> > In this example, if the user clicks on one of the <p> elements within
> > the <div>, my toggle doesn't work--I'm assuming because the
> > event.target is the <p> element and not the <div>, so the add/
> > removeClass isn't performed on the parent <div>.
>
> > html:
> > --------
> > <!-- div is 200px x 200px -->
> > <div class="clickable_element">
> > <p>element title</p>
> > <p>element label</p>
> > <p class="positioned_label">status text</p>
> > </div>
>
> > js:
> > -----
> > $(document).ready(function(){
> > $('div.clickable_element').toggle(
> > function(event) {
> > $(event.target).addClass('selected');
> > },
>
> > function(event) {
> > $(event.target).removeClass('selected');
> > }
> > );
>
> > Is the way to handle this to attach separate toggle functions to the
> > <p> elements with an alternate selector to target the parent <div>, or
> > is there a cleaner way to handle this situation?
>
> > TIA--David
