the node <'ul'> I received asynchronously contains <'li'> inputs. I need to add event to every li.
<ul class="parent">
<li><input id="red" type="checkbox"></li>
<li><input id="black" type="checkbox"></li>
<li><input id="white" type="checkbox"></li>
</ul>As I understand I need to use smth like:
$(document).on('change', '.parent' ....})
And probably I need .each.
Can you describe how to use this functionality in this certain case?
$('.parent').on('change', 'li input', function()})
You can attach the event handler to only parent element, the .parent, and the event only needs to bubble up from the clicked li to ul:
$('.parent').on('change', 'li > input:checkbox', function(){...});
Demo:
$('.parent').on('change', 'li > input:checkbox', function(){
console.log($(this).attr('id'));
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="parent">
<li><input id="red" type="checkbox"></li>
<li><input id="black" type="checkbox"></li>
<li><input id="white" type="checkbox"></li>
</ul>