Question

我的wordpress上有一个表格，每行都有一个按钮，当你点击它时会创建一个小表格（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);
}

在小屏幕上，表格元素成为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';
    }
}

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

有任何线索吗？：）

Answer 1

你的第一个代码只运行一次，对吗？我敢打赌，如果你把页面加载得很小，它可以在小屏幕上工作，但如果加载的宽度超过768则不然，然后调整为小。

基本上似乎正在发生的事情是当页面大于768宽时添加事件侦听器，但选择将添加到的内容正是基于此。

Answer 2

您的网页上运行了大量代码，因此我不知道根本情况，但这是一般性问题。

在启动时执行此操作：

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

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

addEventListener（）不适用于小屏幕

2 个答案: