如何在Javascript中为onclick弹出窗口添加事件侦听器？

考虑到有一些超链接标记使API调用后端

示例：

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

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

我面临的问题是

未捕获类型错误：执行此语句时无法读取null的属性“click”

我知道问题是弹出内容没有完全加载，这就是为什么此代码

document.getElementById（“pv联系人信息”）

返回null

我的问题是是否有任何侦听器函数来检查是否加载了弹出内容

---

或者我们可以用另一种方法来做。最好使用浏览器支持/vanilla javascript而不是库。

您可以使用MutationObserver来监视页面上DOM的更改

如果您需要与旧浏览器保持兼容，请使用单击事件触发您自己的手动观察程序。比如：

var间隔\u id=false；
函数lookForPopup（）{
如果（间隔\u id）{
clearInterval（interval\u id）；
}否则{
interval\u id=setInterval（函数（）{
var popup=document.getElementById（'some-id'）；
如果（弹出）{
//做点什么
clearInterval（interval\u id）；
}
},1000);
}
}

因为@Gavin已经建议使用

MutationObserver

我想详细说明一下

我是如何使用

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

正如您在上面所看到的，我添加了另一个子MutationObserver来观察divDoc元素。这是因为当

hrefDoc

单击事件时，使用一些observer选项调用父

MutationObserver

回调。但在这种情况下，我无法获得我的

突变节点

---

这就是为什么我添加了另一个this语句

let divDoc=document.getElementById（“ember”）

并在子

MutationObserver

中等待此targetNode。最后，我从这个标签

文档中提取了数据

实际上没有做任何事情，如果您有多个id=“ember107”的链接，那么代码也将失败。我猜您需要授权，但您的代码不够详细，我无法确定

atag

是如何生成的？你在哪里调用你的JS？那么模态在加载时是否有事件？大多数库都有。@mplungjan为了举例，我提到了这个id为的标记。我的目标是从弹出窗口中获取数据。一旦它完全加载。我如何知道它是否已加载？或者可能只是委派假设ajax调用需要一些时间委派的侦听器仍然需要等待新元素的创建。我假设OP不能更改ajax成功函数，否则就不需要了。很抱歉，根据我的要求，我不应该选择setTimeOut，因为如果API需要更多的时间，这可能会在最坏的情况下中断。这不是一个超时，而是一个不断检查的间隔。。。。

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