Necesito detectar cuándo aparece un elemento y vincularlo con un eventListener.
Hay 2 formularios en la página web, cuando se envía, el primero se elimina y el segundo se crea dinámicamente según los valores del primer formulario.
Solo puedo ejecutar código onDomReady, uso $(function(){...});
Intenté verificar si input[data-name="check3"] existe usando setInterval() y, cuando lo encontré, vinculé eventListener a él.
También traté de vincular el eventListener después del primer envío firme usando setTimeout() .
Ambas soluciones "funcionaron", pero me pregunto si hay una forma más limpia de hacerlo.
Hay un ejemplo usando MutationObserver.
// element will appear at a random time setTimeout(() => { document.body.insertAdjacentHTML('afterbegin', '<div id="el">#el</div>') }, Math.floor(Math.random() * 4000) + 1000) const parentOfELement = document.body const onMutation = () => { if (parentOfELement.querySelector('#el')) { observer.disconnect() console.log('#el appeared!') } } const observer = new MutationObserver(onMutation) observer.observe(parentOfELement, {childList: true})Puede usar MutationObserver para observar los cambios que se realizan en el árbol DOM y detectar qué nodos se agregan a dom y agregarles detectores de eventos. hay un ejemplo en la documentación que puede usar.
// Select the node that will be observed for mutations const targetNode = document.getElementById('some-id'); // Options for the observer (which mutations to observe) const config = { attributes: true, childList: true, subtree: true }; // Callback function to execute when mutations are observed const callback = function(mutationsList, observer) { // Use traditional 'for loops' for IE 11 for(const mutation of mutationsList) { if (mutation.type === 'childList') { console.log('A child node has been added or removed.'); } else if (mutation.type === 'attributes') { console.log('The ' + mutation.attributeName + ' attribute was modified.'); } } }; // Create an observer instance linked to the callback function const observer = new MutationObserver(callback); // Start observing the target node for configured mutations observer.observe(targetNode, config); // Later, you can stop observing observer.disconnect();