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

Question

我建了一个小网站，动态地将代码添加到 html divs 。 设置数据后，我使用div的id添加一个click事件和mouse enter/leave事件。 它只是普通的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 - 只是为了说明）：

function display(id){

        var container = document.getElementById("myContainer");
        var element = document.createElement("div");
        var containedElement = document.createElement("div");

        element.id = id;
        element.className = "myClass";
        containedElement.className = "tohideStuffOnLoad";

        element.appendChild(containedElement);
        container.appendChild(element);

}

以下是我编译后的代码。 在应用程序的整个生命周期中，页面的生命周期保持不变：

<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>

我单击了检查元素，然后查看了我的 html - m-display 属性在 800 或更小的屏幕上切换，而在大屏幕上不执行任何操作。

除了我的事件没有触发这一事实外，没有显示任何错误。

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

注意上面的，虽然我认为它不会改变任何东西

Answer 1

好的 - 这是出了什么问题：

父容器的背景属性是透明的。 z-index 设置在下面的内容之上； 容器覆盖了它下面的内容。 这仅适用于大屏幕......因此没有点击方法触发其下方的内容:(

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

Answer 2

以下行：

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

快照所有div.myClass元素。 可能发生的情况是刷新后不同的元素被添加到.myContainer ，那些没有被快照。

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