0
579
VistasJavascript: cómo esperar hasta que exista un elemento en DOM
Soy nuevo en Javascript y estoy tratando de codificar un comercio electrónico "simple".
El caso es que tengo un carrito que aparece (se desliza desde un lado) cada vez que se agrega un nuevo artículo, y dentro del carrito, el artículo se representa con un contenedor que se ve así:
Todo funciona perfectamente EXCEPTO UNA COSA.
Dado que el usuario agrega los elementos al carrito, no existen previamente dentro de él, y mi código no puede obtener los botones antes de que aparezca el carrito, por lo que terminan siendo "nulos".
Para que los botones del carrito funcionen, tengo que volver a cargar la página, para que ya estén allí (porque estoy usando Almacenamiento local y, por lo tanto, el DOM se recarga con los elementos que ya están allí, y ahora puede encontrar los botones)
¿Hay alguna forma de hacer que mi código espere a que los elementos se agreguen al carrito y aparezcan en el DOM y solo ENTONCES los recupere?
Como es para adjuntar a este post, os dejo el repositorio, para que le echéis un vistazo (lo único importante está en la carpeta "CATALOGO" > products.html // carpeta "assets/js" > "catalogo. js":
Repositorio de código de Github
El código es un poco desordenado, ya que he estado parcheando y reintentando un montón de cosas para lograrlo, pero sin resultado. (El EventListener DOMContentLoaded tampoco funcionará ya que el dom está cargado, pero los elementos dentro del carrito aún no existen)
(NO estoy buscando una solución como setTimeOut ) Pensé que podría usar Selenium, pero tendría que usar el nodo y quería hacerlo solo con JS.
2 Respuestas
Responde la pregunta0
Estoy en un teléfono y no puedo verificar su código, pero según los detalles que proporcionó, debe capturar la burbuja de entrada (ya que no es posible apuntar directamente a un botón creado dinámicamente)
Para hacerlo, coloque su controlador de eventos en un elemento que ya existe sin la entrada del usuario, como un div superior... cuando el usuario hace clic en el botón, el evento se expandirá hasta ese div y podrá capturarlo allí.
Dijiste que eres nuevo en Javascript, así que si no estás familiarizado con el concepto, busca en Google "burbujeo de eventos de Javascript" y hay muchos artículos excelentes.
EDITAR : creé un ejemplo muy básico de esto en acción si quieres ver, solo guarda esto como un archivo HTML y ábrelo en tu navegador.
<html> <body> <div> <button id="addBtn">Add New Button</button> </div> <div id="newBtnContainer"></div> </body> </html> document.getElementById('addBtn').onclick = function() { var btn = document.createElement('button'); var btnText = document.createTextNode("Dynamically Created Button"); btn.appendChild(btnText); document.getElementById('newBtnContainer').appendChild(btn); } document.getElementById('newBtnContainer').onclick = function() { alert('Found the button!'); }Espero que esto ayude a su caso de uso Gracias
0
¿Por qué no tratar de obtener esos botones una vez que se agrega algo al carrito?