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（）不能在小屏幕上工作

回答

相關問題