addEventListener（）在小屏幕上不起作用

Question

我的wordpress上有一张桌子，每一行都有一个按钮，当您单击它时（ 在此页面上 ）会创建一个小表格。 它工作得很好，除非您将浏览器的宽度更改为<768px，然后什么也没有发生。

这是我的主要电话：

var buttons = [];
if (jQuery(window).width() > 768)
    buttons = document.querySelectorAll('td button');
else
    buttons = document.querySelectorAll('div button');

/*
 Add a click event to all buttons inside the table
 */
for (var i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener('click', clickCheck);
}

在小屏幕上，表元素变为div，因此我必须以不同的方式定义buttons数组。
现在这是clickCheck()函数：

function clickCheck(e) {
    console.log('ok');
    // if first click on the button
    if (e.target.textContent === 'Inscription') {
        // Cleaning an eventual earlier click on another button
        for (var j = 0; j < buttons.length; j++) {
            if (buttons[j].textContent === 'Fermer') {
                buttons[j].parentNode.removeChild(buttons[j].parentNode.firstChild);
                buttons[j].textContent = 'Inscription';
            }
        }

        // Popping the form
        formPop(e);
        e.target.textContent = 'Fermer';
    }
    // if form submission
    else {
        // Depopping the form
        formDepop(e);
        e.target.textContent = 'Inscription';
    }
}

在小于768像素的屏幕上，控制台中未显示“确定”，因此不会读取该事件。 我已经检查过，即使在小屏幕上，我的buttons数组也很好，所以问题必须来自addEventListener() 。

有什么线索吗？ :)

Answer 1

您的第一个代码只运行一次，对吧？ 我敢打赌，如果您将页面加载得很小，那么它可以在小屏幕上运行，但是如果您加载的页面宽于768，然后将其缩小到较小的尺寸，则无法运行。

基本上，似乎发生的是，当页面大于768宽，但什么增加他们的选择，以基于正是该事件侦听器被添加。

Answer 2

您的页面中运行着很多代码，所以我不知道根本原因，但这是普遍的问题。

在启动时执行此操作：

 buttons = document.querySelectorAll('div button');

您获得的按钮元素数组与页面中可见的按钮元素数组不同。 您可以将原始的buttons数组与单击时运行新document.querySelectorAll('div button')时发生的情况进行物理比较（我在调试器中是这样做的）。 第一个包含10个按钮，第二个包含20个按钮。 我认为页面中的一些代码会在生成事件处理程序后生成动态内容，并且您在页面中看到并与之交互的是在运行代码以添加点击处理程序后创建的动态内容，因此可见内容没有事件处理程序。