addEventListener（）不适用于小屏幕

I've got a table on my wordpress, with a button on each row, which creates a small form when you click on it (on this page). It's working perfectly fine, except when you change your browser's width to <768px, then nothing happens.

我的wordpress上有一个表格,每行都有一个按钮,当你点击它时会创建一个小表格(在这个页面上)。它工作得很好,除非你将浏览器的宽度改为<768px,然后什么也没发生。

This is my main call :

这是我的主要电话:

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

On small screens, the table elements become divs, so I had to define the buttons array differently.
Now this is the clickCheck() function :

在小屏幕上,表格元素成为div,所以我必须以不同方式定义按钮数组。现在这是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';
    }
}

On screens smaller than 768px, the 'ok' isn't appearing in the console, so the event isn't read. I've checked and my buttons array is fine even on small screens, so the problem has to come from addEventListener().

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

Any clue ? :)

任何线索? :)

2 个解决方案

#1

There's a lot of code running in your page so I don't know the root case, but here's the general problem.

你的页面中运行了很多代码,所以我不知道根本情况,但这是一般问题。

When you do this at startup:

在启动时执行此操作:

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

You are getting a different array of button elements than what ends up visible in your page. You can physically compare the original buttons array with what happens when you run a new document.querySelectorAll('div button') at the time of the click (I did so in the debugger). The first will contain 10 buttons, the second will contain 20 buttons. I think some code in your page is generating dynamic content AFTER you hook up the event handlers and what you're seeing and interacting with in the page is the dynamic content that was created after you ran your code to add click handlers so the visible content has no event handlers on it.

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

#2

Your first code is only being run once, right? I bet it works on small screens if you load the page small, but not if you load it wider than 768 and then resize down to small.

你的第一个代码只运行一次,对吧?我敢打赌它可以在小屏幕上工作,如果你加载页面很小,但如果你加载它超过768然后调整大小到小。

Basically what appears to be happening is that the event listeners are being added when the page is greater than 768 wide, but the selection of what to add them to is based on exactly that.

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

#1