[jQuery] Re: Event handling/propagation question

[Liam Potter]

$(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