Sé cómo agregar detectores de eventos a elementos creados dinámicamente, pero tengo un pequeño bloqueo mental al hacerlo en un patrón MVC.

Entonces mi controlador le dice a la vista que abra un modal con varios elementos/tarjetas. Cada tarjeta tiene un botón. Al presionar el botón se reemplaza la tarjeta con otra tarjeta recién creada. Algo como esto:

 // Controller.js if(response.data) { view.renderModal(response.data); this.addModalListeners(); } ... function addModalListeners() { // Select the elements' btns, loop over them adding logic const btns = document.querySelector('.btns'); btns.forEach(btn => { btn.addEventListener('click', () => { // do things here that the element needs view.replaceTheElementThatContainsThisButton(// pass that info); }) }) }

Entonces, básicamente, mi problema es que el controlador establece la lógica para los clics btns. Pero la vista se encarga de reemplazar el elemento.

• Podría agregar un oyente al botón del nuevo elemento en la vista, pero no tengo acceso a los datos en el Controlador.

• También podría crear el nuevo elemento en el controlador, agregar el oyente y luego pasarlo a la vista, pero ¿crear un elemento DOM no se siente como responsabilidad del controlador?

Estoy seguro de que hay una solución obvia, pero todavía no puedo verla.

Cualquier ayuda sería apreciada

* Editar : supongo que también podría tener la lógica en una función separada en el controlador y pasarla a la vista. Esta se siente como la mejor respuesta que puedo pensar hasta ahora