on click toggle for child element of the certain class (handlers) - jquery - handler

Question

When I click on parent, I need to affect one particular child (toggle it's style).
I achieved toggle functionality with handlers:
$(".p1").on({
mouseenter: mouseEnter,
mouseleave: mouseLeave
});
function mouseEnter() {
$(this).css('border', 'solid 5px #999999');
}
function mouseLeave() {
$(this).css('border', 'solid transparent 5px');
}
function handler1() {
$(this).css('border', 'solid 5px #222222');
$(this).off('mouseenter mouseleave');
$(this).one("click", handler2);
}
function handler2() {
$(this).css('border', 'solid transparent 5px');
$(this).on({mouseenter: mouseEnter, mouseleave: mouseLeave});
$(this).one("click", handler1);
}
$(".p1a").parent(".p1").one("click", handler1);
$(".pl").children(".p1").one("click", handler1); //this one doesn't work
http://jsfiddle.net/2czxN/4/
Everything works except for affecting the child by clicking on it's parent (aka the last line).
How can this functionality be added to this function?

Answer 1

The only diffrence in your fiddle is, that the .pl wraps just the first .p1, so the second wont work...
$(".pl").children(".p1").one("click", handler1); //this one doesn't work
<div class="pl" style="width: 300px; height: 150px; background: #888888; border: solid white 5px;">
<div class="p1" style="width: 200px; height: 100px; background: #555555; border: solid transparent 5px;">
<div class="p1a" style="width: 200px; height: 10px; background: #333333;"></div>
</div>
<div class="p1" style="width: 200px; height: 100px; background: #555555; border: solid transparent 5px;">
<div class="p1a" style="width: 200px; height: 10px; background: #333333;"></div>
</div>
</div>
yes, i just wanted to explain why the second declaration isnt working on the seconed p1..
im not sure what you want to achive, something like this?: http://jsfiddle.net/reyaner/3yZmW/

Answer 2

Here is the final function - http://jsfiddle.net/2czxN/6/
Works 100% accurately regardless if you click on children (p1a) or parent (pl).
$(".p1a").one("click", handler1);
$(".pl").one("click", handler1);
Key is in putting all selectors (find, parent) in the handlers with $(this).