Bind eventListener when element appears

I need to detect when an element appears and bind an eventListener to it.

There are 2 forms on the webpage, when submitted the first one is deleted and the second one is created dynamically depending on the first form values.

I can only run code onDomReady, I use $(function(){...});

I have tried to check if input[data-name="check3"] exists using setInterval() and when found I bind the eventListener to it.

I also tried to bind the eventListener after the first firm submit using setTimeout().

Both of these solutions "worked", but I wonder if there is a cleaner way to do it.

>Solution :

You can use MutationObserver to watch for changes being made to the DOM tree and detect what nodes are added to dom and add event listener to them. there is an example in the documentation that you can use.

// Select the node that will be observed for mutations
const targetNode = document.getElementById('some-id');

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