Google Chrome浏览器扩展程序看不到点击？

Question

我无法获得任何这些事件侦听器来触发任何功能。

以下是我的Chrome扩展程序。 警报被触发，但是没有侦听器起作用。 元素是动态创建的，因此我不确定是否会有所不同。

document.addEventListener('DOMContentLoaded', function() {
    document.querySelector('.overlay_show').addEventListener('click', alertit);
    document.querySelector('.overlay_hide').addEventListener('click', alertit);
});

元素html

`<a class='overlay_hide' ><i>Hide<i/></a>`;

`

有什么想法会有所帮助吗？

Answer 1

元素是动态创建的，因此我不确定是否会有所不同。

是的 如果在添加元素之前添加了侦听器，它将无法正常工作。 当您执行document.querySelector('.overlay_show') ，它将选择具有类.overlay_show的第一个元素，并在其上添加一个侦听器。 完成。

因此，您有2个解决方案：

添加元素后添加侦听器

但这意味着您每次都必须这样做

监听单击`<body>`并使用`e.target`

document.body.addEventListener('click', function (e) {
    if (e.target.classList.contains('overlay_show')
        || e.target.classList.contains('overlay_hide')) {
        alertit()
    }
}

Google Chrome浏览器扩展程序看不到点击？

问题描述

1 个解决方案

解决方案1
1 已采纳 2017-04-26 03:06:46

添加元素后添加侦听器

监听单击`<body>`并使用`e.target`

Google Chrome浏览器扩展程序看不到点击？

问题描述

1 个解决方案

解决方案1 1 已采纳 2017-04-26 03:06:46

添加元素后添加侦听器

监听单击<body>并使用e.target

解决方案1
1 已采纳 2017-04-26 03:06:46

监听单击`<body>`并使用`e.target`