My Javascript not work after call to filter Ajax Content

Viewed 18

I have i problem with my javascript code i make an application symfony with filter search to search (actif , inactif custumers), every things wirk fine with this filter form but when Ajax change my content in this content i have some buttons to inable & disable custumers if i use filter search with Ajax this buttons not work any more it's seems like the DOM not know the Elements of my html ? i put some of my code here Thank you all :

const cardClient = document.getElementById('clientCard')
if (cardClient){
    for (let i = 0 ; i < cardClient.children.length ; i++){
        const switchBtn = cardClient.children[i].getElementsByClassName('form-check-input')
        const modalBtn = cardClient.children[i].getElementsByClassName('modal-footer')
        const modalBody = cardClient.children[i].getElementsByClassName('modal-body')
        const validBtn = modalBtn[0].children[1];
        switchBtn[0].addEventListener('click',(e)=>{
            e.preventDefault()
            validBtn.addEventListener('click',()=>{
                modalBody[0].innerHTML ="<div class=\"spinner-border text-primary\" role=\"status\">\n" +
                    "</div>"
                axios.post('/client/'+validBtn.id+'/active', {
                })
                    .then(function (response) {
                        console.log(response);
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                location.reload();

            })
        })
    }
}
0 Answers
Related