addEventListener（）不能在小屏幕上工作

我在wordpress上有一个表格，每行有一个按钮，当您点击它时会创建一个小表格（on this page）。它工作得很好，除非您将浏览器的宽度更改为< 768px，则不会有任何反应。addEventListener（）不能在小屏幕上工作

这是我的主要电话：

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

任何线索？ :)

来源

2016-08-13 yurden

我怀疑我们能够在没有看到您的HTML并能够自行播放窗口宽度的情况下看到发生了什么。可能你有一个布局或选择器问题，这两个问题都需要看HTML来理解。 – jfriend00

你可以按照我的文章中的链接，你将会看到带有表格的页面，并且你将能够看到HTML并用窗口宽度来播放:) – yurden

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

当你做到这一点在启动时：

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

你得到一个不同的阵列按钮元素的比在你的页面看到什么结束了。您可以在物理上比较原始buttons阵列与单击时（在调试器中执行此操作时）运行新的document.querySelectorAll('div button')时发生的情况。第一个包含10个按钮，第二个包含20个按钮。我想你的页面中的一些代码会在你连接事件处理程序之后生成动态内容，并且在页面中看到并与之交互的是在运行代码以添加点击处理程序以创建可见内容之后创建的动态内容没有事件处理程序。

来源

2016-08-13 23:50:50 jfriend00

好吧，我认为这是沿着这些线，但我没有技术解释。我把事件处理程序放入一个窗口加载事件，现在它似乎工作正常。非常感谢！ – yurden

@Durden - 如果这些按钮是通过某种类型的ajax驱动代码创建的，那么如果您的修补程序在窗口加载事件中工作，那么它可能是盲目的运气。这可能只是因为ajax调用目前正在窗口加载之前完成，因此它正在工作，但它们不一定能保证在服务器的较慢日期或较慢的连接中这样。你真的应该明白按钮是如何创建的，并且确保你在创建按钮后连接它们。 – jfriend00

@Durden - 如果我是代码审查你的修复，我不会接受它，直到你可以解释你如何“知道”什么时候按钮被创建，什么时候保证完成创建。 “window.onload”恰好运行的事实是不够的。 – jfriend00

你的第一个代码只运行一次，对吧？我敢打赌，如果你加载的页面很小，它可以在小屏幕上工作，但如果你加载的比768更宽，然后调整到较小，则不会。

基本上看起来发生的事情是当页面宽度大于768时添加事件监听器，但是选择什么添加它们正是基于此。

来源

2016-08-13 23:21:59

Nop它永远不会工作，无论我去的是从我的手机或从我的电脑链接。 – yurden

那么你的代码添加监听器试图将它们添加到表格单元格中的按钮在768及以下：'按钮= document.querySelectorAll（'td按钮'）;' 这些元素是否存在于你的html？ –

这些元素只存在于768px以上，这就是为什么我必须为较小的屏幕定义不同的按钮（'div按钮'，因为表格单元被小屏幕上的div替换）。用我的if/else，事件监听器应该被添加到按钮而不管宽度，对吧？ – yurden

addEventListener（）不能在小屏幕上工作

回答

相关问题