- TLC Home Home
- Discussions Discussions
- Documentation Documentation
- Knowledge Base Knowledge Base
- Education Education
- Blog Blog
- Support Desk Support Desk
01-18-2022 11:51 PM
HI,
How to trigger event on dynamic DOM elements?
I am working on a code where some code has to be triggered once a dynamic popup appears on the DOM.
The class selectors attached to it loads only when popup loads on DOM.
Will jQuery on Handler show event work for this or is there something else that is required?
Thank you.
01-24-2022 09:41 AM
You can use DOM Observers if the element is not present on the page when you run your code, in plain javascript.
From the docs:
// Select the node that will be observed for mutations const targetNode = document.querySelector('.popup-example');
// Or you can listen for all elements and then check if your .popup-example exists on each mutation
// const targetNode = document.querySelector('body'); // Options for the observer (which mutations to observe) const config = { attributes: true, childList: true, subtree: true }; // Callback function to execute when mutations are observed const callback = function(mutationsList, observer) { // Use traditional 'for loops' for IE 11 for(const mutation of mutationsList) { if (mutation.type === 'childList') { console.log('A child node has been added or removed.'); } else if (mutation.type === 'attributes') { console.log('The ' + mutation.attributeName + ' attribute was modified.'); } } }; // Create an observer instance linked to the callback function const observer = new MutationObserver(callback); // Start observing the target node for configured mutations observer.observe(targetNode, config); // Later, you can stop observing observer.disconnect();
Copyright All Rights Reserved © 2008-2023