Pick up child element of father and son created dynamically

Question

I have the following question: I create dynamically various id and class.

What I need is when I click on the parent id the child gets a toggle.

Super dad receives via append as Divs.

When I click "hit" the 39 the daughter (from 39) has to suffer a toggle. When I click on "hit" 40 the daughter (40) has to suffer a toggle, and so on (I will have a lot of that on the same page).

<div id="superpai">
 <div id="39"> aperte 
         <div class="filha">39</div>
</div>
<div id="40"> aperte 
         <div class="filha">40</div>
</div>
<div id="41"> aperte 
         <div class="filha">41</div>
</div>

</div>

What would be the simplest solution to this ? When I know the parent element is quite simple. But when I do not know (that is the case). How do I do ?

What’s the best way ?

Answer 1

What you seek may be so:

$(document).on('click', '#superpai > div', function() {
  $(this).find('.filha').toggle();
});

It’s good to use class .filha so, by the time the event click happens jQuery looks for an element with that class, down from the clicked element.

The delegator here is the .on() already explained here. That is, when there is a click on the page, jQuery looks for elements div may they be direct descendant of #superpai.

jsFiddle: https://jsfiddle.net/3cytL5ga/1/