Javascript Fetch 只工作一次

Question

First of all thank you for any help you can give me. I want to be able to dynamically activate/deactivate the status of a partner.

On each status change, a Bootstrap modal opens

For this I use Fetch() It works fine but only on the first action. If I then try on the same line again it doesn't work anymore. Same on another line. I have to reload the page so that I can redo the activation or deactivation action

Here is my code:

 // Activation ou désactivation dynamique d'un partenaire //On boucle sur les input document.querySelectorAll(".form-switch-statut-partenaire input").forEach(input => { input.addEventListener("change", () => { //On récupère l'url de la route edit-statut const Url = input.dataset.path; const Modal = document.getElementById('exampleModal') const Footer = Modal.getElementsByClassName('modal-footer')[0].children[1] Footer.addEventListener("click", () => { //On lance la requête ajax fetch(Url, { headers: { } }).then((response) => { console.log(response); return response.json() }).then(data => { console.log(data) const content = document.querySelector('body'); content.innerHTML = data.content; }).catch((err) => console.log('Erreur: '+ err)); }) }); });

I can't find the solution despite my research

Answer 1

Line 122 changes the whole body with the fetched data. This will remove all event listeners you previously set.

Try to change only the HTML that actually changed in the response. Fetching the whole body has probaly some network overhead that can be avoided.

Or move the event listener registration to an init method and call that after swapping out the body.

Answer 2

thank you for your reply I had already tried to modify only the array data using (#formCheck)

 }).then(data => { console.log(data) const content = document.querySelector('#formCheck'); content.innerHTML = data.content;

The action works but my page is grayed out like my modal is open but it's not visible

enter image description here