JavaScript - Ejecucion de Script para elementos del DOM agregados dinamicamente

Buenas chicos, no se como vaya esta web actualmente pero pienso podría ayudarme.

Tengo el siguiente inconveniente, estoy creando una pequeña aplicación, (practicas), en l cual quiero usar un único archivo principal y los demas agregarlos, o sus funciones, mediante import, con la etiqueta module, es decir script de js tipo módulos.

Ahora, esto lo hago para tener vistas, y controladores que introduzcan estas vistas, por ejemplo.

Estoy cargado dentro de un div, un archivo HTML a parte que contiene un pedazo de código para mostrar un formularios, este formularios recoge en un select una serie de productos, y tiene un botón que al ser presionado agrega el producto actual a una lista que se encuentra abajo de forma dinámica.

Bien, esto funcionaba cuando tenia cada vista separada en varias paginas y los script de cada uno se cargaban de acuerdo a la pagina, ahora estos pequeños trozos de HTML los estoy agregando dentro de un div que se encuentra en la pagina principal, pero no encuentro la manera de que ejecute el script necesario al presionar el botón que agrega el producto, que como mencione ya, lo estoy cargando dinámicamente.

Hola Eli, cuando se carga el código de javascript en una pagina web, tiene la estructura del dom de la pagina, por lo que si en cualquier comento cambias el dom de dicha pagina, el código de javascript que se cargo con anterioridad no se da cuenta de dicho cambio, por eso no puedes acceder a dichos elementos.

Para solucionarlo, disponemos de MutationObserver que detecta cualquier cambio en el DOM https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

Hola, buen día, gracias por tu respuesta, voy a mirar lo que me comentas a ver que tal me va con eso, y conocer si es lo que me hace falta para que funcione lo que realizo.

Tratare de ejemplificar un poco mas lo que realizo y estoy tratando de hacer, por si fue confuso mi explicación anterior. pasa que quizás me digas que con eso se puede hacer, y trato de hacerlo a como de lugar con eso, y capaz había otra manera.

tengo una pagina principal donde esta un menú, este menú esta compuesto de enlaces, y al presionar en cada uno de ellos detecto el cambio de la URL, o la URL con 'hashchange'.


esto se lo paso a una función 'router()' que tiene un 'Switch' , donde leo cada url, y de acuerdo a esta llamo a otra función, la cual viene exportada.


que realiza principalmente la acción de incrustar dentro de un div en esta primera pagina, un trozo de código que es la tabla de deudores, anteriormente lo pintaba con el mismo JavaScript, pero luego lo incrusto con fetch, solo un HTML que tiene la porción de la tabla.


ahora, después de meter esa Proción de HTML, cargo con una función un listado de los deudores, que actualmente están almacenados en el localStorage, pero si simplemente llamo a esta función '- listardeudores() -' después de '- createTablaDeudores() -' me dice que estoy haciendo innerHTML sobre un elemento no existente, por lo que supongo en este momento no existe.

Entonces lo que hago es llamarla pero 1 segundo después de la otra función, con '- setTimeout() -', y va bien, hace lo que quiero, mas no se si es la mejor forma o la forma correcta pero hace lo que quiero. que es cargar la vista de los deudores, traer el archivo que tiene la tabla, y luego llenarla con los deudores que se encuentra en el localStorage.

Ahora si esta vista nueva tiene un botón, como me pasa en otra porción de código, y al presionar este botón debe ejecutarse X acción, la única forma hasta ahora que pude hacer que funcionara fue llamando dentro del '- setTimeout() -' haciendo una prueba de alert().

Dentro de este '- setTimeout() -' escucho el evento click del botón que he incrustado y ejecuto un alert de prueba, y va bien. hace lo que quiero cque es reconocer este boton, pero no se si es la forma correcta.

pondré el trozo de código como ejemplo, aunque se trata de otra vista, y es parte de otro controlador.