如何在 Javascript 中为 onclick PopUp 添加事件监听器？

Question

Consider there is some hyperlink tag that makes the API call to backend.

Example:

<a  href="/get/contact-info/" id="ember107" >Contact info </a>

After the backend API call completed it will trigger/open a popup in that page.

Popup data: (Sample one div data)

<div id="ember"> <h1 id="pv-contact-info"> Contact Name</h1></div>

My objective is to extract data from this popup (above tag). Lets say Contact Name from h1 tag.

what I tried so far:

let atag = document.getElementById("ember107");
atag.addEventListener('click', () => { 
    document.getElementById("pv-contact-info").innerText; // getting from popup h1 tag
});
atag.click(); // explicit click

The Problem I faced is Uncaught TypeError: Cannot read property 'click' of null when this statement is executed document.getElementById("pv-contact-info").innerText;

I know the problem is popup content was not loaded completely that's why this code document.getElementById("pv-contact-info") returning null.

My Question is whether there is any listener function to check Popup content is loaded completely or we can do this in another approach. Most preferable using browser support /vanilla javascript rather than library.

Answer 1

You can use a MutationObserver to watch for changes to the DOM on the page. MDN .

If you need to stay compatible with older browsers use your click event to trigger your own manual watcher. Something like:

var interval_id = false;
function lookForPopup(){
    if(interval_id){
        clearInterval(interval_id);
    }else{
        interval_id = setInterval(function(){
            var popup = document.getElementById('some-id');
            if(popup){
                // do something

                clearInterval(interval_id);
            }
        },1000);
    }
}

Answer 2

As @Gavin already suggested to use MutationObserver I like to elaborate a little bit.

How I fixed this issue using MutationObserver .

MutationObserver has an ability to watch for changes being made to the DOM tree.
 I mention the code below how it fixed my issue/requirement.


 // selecting the href by id and triggering a click event.
 let hrefDoc = document.getElementById("ember");
 divDoc.click();


let m = new MutationObserver(() => {
  let divDoc = document.getElementById("ember");
    new MutationObserver( () => {
          // Finally Extracting the required data
          console.log(document.getElementById("pv-contact-info").innerText);
        }
      }).observe(divDoc || document,observerOptions);
  });
m.observe(hrefDoc,observerOptions);

As you can see above I added another child MutationObserver to observe the divDoc element. That is because it is when the hrefDoc click event the parent MutationObserver callback is called with some observeroptions. But in that case I could not get my <div id="ember"> Mutation Node.

That's the reason I added another this statement let divDoc = document.getElementById("ember"); and waiting for this targetNode in the child MutationObserver . Finally I extracted the data from this tag <h1 id="pv-contact-info">