Uso cadenas de plantilla jquery y es6 para crear una casilla de verificación con una etiqueta:
function createCheckBx(id, text) { return $(`<div> <input id ="${id}" type="checkbox"/> <label for="${id}">${text}</label> </div>`); }Ahora me gustaría adjuntar un detector de eventos a la casilla de verificación
checkBox = createCheckBx("42", "Answer"); cb.???.addEventListener("change", (evt) => { // do smth. when toggled }) pero el div aún no está adjunto al dom, así que no puedo usar document.getElementById (o $("#...") de jquery y no quiero acceder a él mediante ningún tipo de índice como cb.childNodes[0] , ya que la persona que llama no puede conocer el índice y la estructura html puede cambiar. ¿Alguna ayuda?
Saludos cordiales, AJ
El hecho de que el elemento aún no exista en el DOM no significa que no pueda adjuntarle un controlador de eventos. El único problema en su ejemplo es la sintaxis que está utilizando al mezclar jQuery y métodos simples de JS. Debes ceñirte a uno o al otro.
Como está incluyendo jQuery en la página, así es como puede hacer que su ejemplo funcione:
let createCheckBox = text => $(`<div><label><input type="checkbox" />${text}</label></div>`); let $checkBox = createCheckBox("Answer"); $checkBox.on('change', e => { console.log(`Checkbox checked? ${e.target.checked}`); }); // add the checkbox to the DOM at some point: $('body').append($checkBox); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> Tenga en cuenta que eliminé el atributo id de la función que crea el elemento y también el HTML que genera. Esto se debe a que crear una id en tiempo de ejecución es un antipatrón y debe evitarse. Utilice clases comunes en su lugar.
También tenga en cuenta que puede ser mejor que cree un solo controlador de eventos delegado para manejar todo su contenido agregado dinámicamente, en lugar de adjuntar un evento a medida que crea los nuevos elementos. He aquí un ejemplo de cómo hacer esto:
let createCheckBox = text => $(`<div><label><input type="checkbox" />${text}</label></div>`); let $container = $('.checkbox-container'); $('button').on('click', e => $container.append(createCheckBox("Answer"))); $container.on('change', ':checkbox', e => { console.log(`Checkbox checked? ${e.target.checked}`); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <button type="button">Add</button> <div class="checkbox-container"></div>