[jQuery] Event handling/propagation question
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 elements within
the <div>, my toggle doesn't work--I'm assuming because the
event.target is the
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">
element title
element label
<p class="positioned_label">status text
</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
elements with an alternate selector to target the parent <div>, or
is there a cleaner way to handle this situation?
TIA--David