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

Question

I can't get any of these event listeners to trigger any functions. 我无法获得任何这些事件侦听器来触发任何功能。

The below is in my chrome extension. 以下是我的Chrome扩展程序。 The alert is triggered but none of the listeners work. 警报被触发，但是没有侦听器起作用。 The elements are created dynamically so I'm not sure if that makes a difference. 元素是动态创建的，因此我不确定是否会有所不同。

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

element html 元素html

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

` `

Any ideas would be helpful? 有什么想法会有所帮助吗？

Answer 1

The elements are created dynamically so I'm not sure if that makes a difference. 元素是动态创建的，因此我不确定是否会有所不同。

It does. 是的 If you add the listener before you add the elements, it won't work. 如果在添加元素之前添加了侦听器，它将无法正常工作。 When you do document.querySelector('.overlay_show') , it selects the first element that has the class .overlay_show , and adds a listener upon it. 当您执行document.querySelector('.overlay_show') ，它将选择具有类.overlay_show的第一个元素，并在其上添加一个侦听器。 Done . 完成。

So, you have 2 solutions: 因此，您有2个解决方案：

Add the listener after* you add the element* 添加元素后添加侦听器

But it means that you have to do that each time you do so 但这意味着您每次都必须这样做

Listen for a click on `<body>` and use `e.target` 监听单击`<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

Add the listener after* you add the element* 添加元素后添加侦听器

Listen for a click on `<body>` and use `e.target` 监听单击`<body>`并使用`e.target`

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

问题描述

1 个解决方案

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

Add the listener after you add the element 添加元素后添加侦听器

Listen for a click on <body> and use e.target 监听单击<body>并使用e.target

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

Add the listener after* you add the element* 添加元素后添加侦听器

Listen for a click on `<body>` and use `e.target` 监听单击`<body>`并使用`e.target`