The issue arises when dynamically populating data from a modal back to the original clicked div, particularly when using event delegation. By storing a reference to the clicked div globally when the modal opens, you can ensure that the data presented in the modal can subsequently be passed back to the original div. This approach allows the modal's content to seamlessly integrate into the UI, enabling a more fluid user experience without losing the context of the interaction.
const prods = document.querySelectorAll(".products"); prods.AddEventlistener("clicked",(e)=> fetch('some url').then(res => { if (!res.ok) { throw new Error("Cannot fetch resource!") } return res.json() }) .then( data => { const arrayObject = JSON.parse(data.data); arrayObject.forEach(prod => { const markup = `<li>${prod.Info}></li>`; document.querySelector('dialog ul').insertAdjacentHTML('beforeend', markup); }); }).catch(error => console.log(error)); });
define the clicked element globally when you open the modal. Your code for opening the modal knows what was clicked, and code inside the modal can access variables in the global space.
Collection
[
|
...
]