I think it should be also working just this way:
$('#mydiv').css('cursor','pointer').click(function(){
$(this).addClass('selected');
});
No need to select all the contents "manually".
On Feb 20, 5:16 pm, spaceage <spaceageliv...@gmail.com> wrote:
> 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
>
>
