Question

I have a div class=”parent” . When I click on it I need to clone div class=”child” and show them depending on the parent area I clicked. The problem arises when I click on the div class=”child”, another child div appears which is the behavior I don’t really want.
One way to overcome this trouble is to write something like this:


$('.parent').click(function(event){
if (event.target.className != 'child'){
$('.child').clone().show();
}
});


I consider that this is not very elegant as, if inside of div class=”child” would be children, then you have to put them in the if() statement also.
Could someone tell me how to manage this problem. Probably there is a way to put all children of the div class=”child” in an array and to loop over them.
Any ideas and thoughts appreciated,
Thanks

Answer 1

$('.parent').click(function(event){ 
  if (event.target === this){
     $('.child').clone().show();
  }
});

Should only target parent and not the children. From the jQuery docs:

event.target:
The target property can be the element
that registered for the event or a
descendant of it. It is often useful
to compare event.target to this in
order to determine if the event is
being handled due to event bubbling.
This property is very useful in event
delegation, when events bubble.

Source