How to trigger event on dynamic DOM elements

[lambanitish]

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.

[danob]

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();