el nodo <'ul'> que recibí de forma asíncrona contiene entradas <'li'>. Necesito agregar un evento a cada 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>Según tengo entendido, necesito usar algo como:
$(document).on('change', '.parent' ....}) Y probablemente necesito .each .
¿Puede describir cómo utilizar esta función en este caso concreto?
$('.parent').on('change', 'li input', function()})
Puede adjuntar el controlador de eventos solo al elemento principal, el .parent , y el evento solo necesita burbujear desde el li al ul en el que se hizo clic:
$('.parent').on('change', 'li > input:checkbox', function(){...});Manifestación:
$('.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>