How to execute the javascript function whenever ajax filter content refreshed

Viewed 37

I have written the JavaScript to modify the DOM attribute based on the click and stored the values in local storage. So after the page loaded, it's getting the value from local storage and set the new attribute to DOM. It's working fine and able to achieve my scenario after perfectly page loaded.

ready(function(){ 
     let element = document.querySelector("body");
if(element.classList.contains("path-api-catalog") ){

    let name1 = document.querySelectorAll(".tooltip_heading > h6");
        for (let i = 0; i < name1.length; i++) {
            let title = name1[i].innerText.replace(/[\n\r]+|[\s]{2,}/g, ' ').trim();
            let titleURL = name1[i].parentNode.parentNode.querySelector('.btn.primary-btn').href;
            if (localStorage.getItem(title) != null){

            if(localStorage[title]===titleURL){
                let titleDiv = name1[i].parentNode;
                titleDiv.querySelector('.bookmark-icon').setAttribute('onclick','RemoveListItem(event)');
                }
            }else{
                let titleDiv = name1[i].parentNode;
                titleDiv.querySelector('.bookmark-icon').setAttribute('onclick','SaveListItem(event)');
            }
        }
    }
})

But I have Ajax category filter to filtering the content. Whenever I click the filter, the content loaded through Ajax. After the Ajax, my JavaScript not modify the attribute and not executed correctly. So, how to execute the JavaScript function even after Ajax content loaded.

0 Answers
Related