Javascript 我动态添加的事件侦听器（使用完全相同的html）附加在小屏幕上，但不在大屏幕上

我建立了一个小网站，并将代码动态添加到html

divs

。设置数据后，我使用

div

的

id

添加

单击

事件和

鼠标输入/离开

事件。它只是简单的HTML，javascript和css

当我以小屏幕大小打开页面时，事件会附着，但当我调整屏幕大小或以大屏幕大小打开页面时，事件不会附着

我还尝试使用

id

和

class

选择器。结果是一样的。我还尝试根据屏幕大小的更新设置事件侦听器（媒体查询）。html和css只在加载时设置一次

我以为问题可能是因为超时而发生的？如何最好地对此进行故障排除

Javascript

const elements = document.querySelectorAll('div.myClass');

if (window.matchMedia("(max-width: 800px)").matches) {
                /* The viewport is less than, or equal to, 800 pixels wide */
                console.log(at 800+"this works, but");
              } else {
                /* The viewport is greater than 800 pixels wide */
                    console.log("this is not working");
                    [...elements].forEach( (el) => {
                        el.addEventListener('click', masterEventHandler, false);
                        el.addEventListener('mouseenter', inFunction, false);
                        el.addEventListener('mouseleave', outFunction, false);
                    });
              }

这是我为容器使用的设置代码（注意，我遗漏了一个或两个div，只是为了举例说明）：

下面是我编译后的代码。这在页面的生存期和应用的生存期内保持不变：

<div id="container">
<div id="id" class="inner">
<div id="amnt" class="amount">$43,762.00</div>
<div class="h-overlay m-display">This is the title
<div class="img"><span>▶</span></div>
</div>
<img src="/animage.jpg" alt="my-image">
<div class="ribbon-new"><img src="/new-ribbon.png" alt="ribbon"></div></div>
</div>

请注意上面的内容，尽管我认为它不会改变任何东西，但请注意以下几行：

const elements = document.querySelectorAll('div.myClass');

快照所有

div.myClass

元素。可能发生的情况是，刷新后，不同的元素被添加到

.myContainer

，这些元素不是快照

---

您可以尝试在调整大小时刷新上面的列表。

好-下面是出现问题的原因：

父容器的背景属性是透明的。 z指数设置在以下内容的上方； 容器盖住了下面的东西。 这只是为大屏幕设置的。。。 因此，没有为其下面的内容触发单击方法：(

---

幸运的是，我的Javascript没有问题。感谢所有的帮助

你能展示更多的代码吗？我们讨论的是哪些元素，你将事件分配给哪些元素？你能做一个简单的代码笔吗？我改变了它，因为我意识到我以前犯了一个错误，所以我修复了它@mrlister这些元素在加载后不会改变…只有classesProblem不是当屏幕宽度大于800px时，其中一个元素已连接事件侦听器，当它们都已连接时，我也尝试刷新列表。感谢您根据您的来源提出的建议，但它似乎在800px及以上的情况下也能按设计工作。因此，当我的屏幕宽度较大时，必须进行其他操作r超过800px我的活动仍然没有启动…窗口。matchMedia（“（最大宽度：800px）”）。matches实际上只是一个插图啊，谢谢。这个问题现在可以结束了吗，或者你想让它对未来的访问者开放吗？

On asking for extra code, I present to you my Event Listeners (I reviewed everything - it is just standard javascript in a script tag):

var inFunction = function(event){
        //console.log(event);
        event.target.children[1].classList.remove("m-display");
    };

    var outFunction = function(event){
        //console.log(event);
        event.target.children[1].classList.add("m-display");
     };

     var masterEventHandler = function(e){
         console.log("Here I redirect to some other stuff");
     };

const elements = document.querySelectorAll('div.myClass');