addEventListener() 不适用于小屏幕

Question

我的 wordpress 上有一个 table，每行都有一个按钮，单击它时会创建一个小表单 (on this page)。它工作得很好，除非你将浏览器的宽度更改为 <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);
}

在小屏幕上，table 元素变成了 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 像素的屏幕上，'ok' 不会出现在控制台中，因此不会读取事件。我已经检查过，我的 buttons 数组即使在小屏幕上也没有问题，所以问题必须来自 addEventListener()。

有线索吗？ :)

Answer 1

您的第一个代码只运行一次，对吗？我敢打赌，如果您加载较小的页面，它可以在小屏幕上运行，但如果您加载的页面宽度大于 768，然后再调整为小屏幕，则不会。

基本上看起来发生的事情是当页面大于 768 宽时添加事件侦听器，但是选择 what 添加它们是基于正是这样。

Answer 2

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

当您在启动时执行此操作时：

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

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

addEventListener() 不适用于小屏幕

addEventListener() not working on small screens

javascript

wordpress

addeventlistener