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

【问题标题】：How to add event Listener for onclick PopUp In Javascript?如何在 Javascript 中为 onclick PopUp 添加事件监听器？
【发布时间】：2020-07-27 11:24:41
【问题描述】：

考虑有一些超链接标签使 API 调用后端。

示例：

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

后端 API 调用完成后，它将触发/打开该页面中的弹出窗口。

弹出数据：（示例一个 div 数据）

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

我的目标是从此弹出窗口（标签上方）中提取数据。让我们说来自 h1 标记的联系人姓名。

到目前为止我尝试了什么：

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

我遇到的问题是Uncaught TypeError: Cannot read property 'click' of null当这个语句执行时document.getElementById("pv-contact-info").innerText;

我知道问题是弹出内容没有完全加载，这就是代码 document.getElementById("pv-contact-info") 返回 null 的原因。

我的问题是是否有任何监听函数来检查弹出内容是否加载完全或者我们可以用另一种方法来做到这一点。最好使用浏览器支持 /vanilla javascript 而不是库。

【问题讨论】：

document.getElementById("pv-contact-info").innerText; 实际上什么也没做
如果您有多个 id="ember107" 的链接，您的代码也会失败。我猜你需要委托，但你的代码不够详细，我无法确定
atag 是如何生成的？你的 JS 叫什么名字？
那么模态在加载时是否有事件？大多数图书馆都有。
@mplungjan 例如，我提到了这个带有 id 的单个标签。我的目标是从弹出窗口中获取数据。一旦它完全加载。我怎么知道它是否加载了？

标签： javascript html dom-events

【解决方案1】：

您可以使用 MutationObserver 来监视页面上 DOM 的变化。 MDN.

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

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

【讨论】：

或者可能只是委托
假设 ajax 调用需要一些时间，委托的侦听器仍然需要等待新元素的创建。我假设 OP 不能改变 ajax 成功函数，否则就不需要了。
对不起，根据我的要求，我不应该使用 setTimeOut，因为如果 API 需要更多时间，这可能会在最坏的情况下中断。
嗯，这不是超时，而是不断检查的间隔......

【解决方案2】：

正如@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点击事件时，父MutationObserver回调被一些观察者选项调用。但在那种情况下，我无法获得我的<div id="ember"> Mutation Node。

这就是我添加另一个此语句let divDoc = document.getElementById("ember"); 并在子MutationObserver 中等待此targetNode 的原因。最后我从这个标签<h1 id="pv-contact-info">中提取了数据

【讨论】：