时间戳

首页 > 解决方案 > 如何在 Javascript 中为 onclick PopUp 添加事件监听器？

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

问题描述

考虑有一些超链接标签使 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 而不是库。

标签： javascripthtmldom-events

解决方案

您可以使用 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);
    }
}

推荐阅读