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

Question

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.

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 :

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() .

Any clue ? :)

Answer 1

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.

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.

Answer 2

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.