如何添加一個事件偵聽器到每個按鈕的表格行結果？

在我的Rails應用程序中，我從@results變量加載一個表，使每個錶行都是@result。對於每個@result錶行，我正在尋找具有與@result關聯的按鈕。我正在嘗試爲每個按鈕使用javascript eventlistener，然後在js.erb文件中監聽事件如何添加一個事件偵聽器到每個按鈕的表格行結果？

運行應用程序時，它看起來像只有第一行按鈕有事件偵聽器，我怎麼能解決這個問題？

此外，我將如何能夠將我的@result傳遞給我的JavaScript，以便我可以利用該對象的部分？

我試圖通過JavaScript這樣做，因爲我想在到剪貼板複製的東西，將文件保存到計算機

js.erb

var copyTextareaBtn = document.querySelector('.button1'); 

copyTextareaBtn.addEventListener('click', function(event) { 

# work with the @result that was clicked over here 
});

html.erb

<% @results.each { |result| %> 
    <tr> 
     <td><%= result[:id] %></td> 
     <td> 
     <button class="button1"> B1 </button> 
     <button class="button2"> B2 </button> 
     <button class="button3"> B3 </button> 
     </td> 
    </tr> 

    <% } %>

來源

2016-04-15 chonglawr

確實可以爲每個元素添加一個事件偵聽器。問題是document.querySelector會返回第一個匹配的元素。要獲得所有這些信息，您可以使用document.querySelectorAll。我們可以將您的JavaScript改寫爲：

var btns = document.querySelectorAll('.button1'); 

Array.prototype.forEach.call(btns, function addClickListener(btn) { 
    btn.addEventListener('click', function(event) { 
    // code here to handle click 
    }); 
});

注意querySelectorAll返回NodeList這就像一個數組，但不幸的是不是一個數組。所以它沒有forEach和Array類中的類似方法。因此，上面的工作通過使用從Array.prototype使用forEach迭代節點。

但是，更好的方法是在表單或文檔級別的父元素或容器上偵聽事件。事件冒泡，因此您可以聆聽一次點擊事件並僅篩選您想要回復的類型。這將是一個事件監聽器而不是N（其中N是按鈕的數量）。

來源

2016-04-15 16:31:47 Cymen

嘿@cymen，謝謝你的回答！那麼你會知道我怎樣才能使用與@按鈕相關的「@result」？ – chonglawr

@chonglawr我建議發佈另一個問題，但一種方法是將結果或其他屬性的id放在DOM按鈕元素上，然後單擊，使用該ID來確定哪個被點擊。還有其他方法，但也有很多選擇。 – Cymen

問題是你每次遞增的className的號碼，如button1，button2並且爲了調用所有button1的你需要給button1類每個HTML的按鈕稱爲JavaScript中只有button1類。

編輯：試試下面的代碼。

var button1 = document.getElementsByClassName("button1"); 
Object.keys(button1).map(function (key) { 
    var button = button1[key] 
    button.addEventListener("click", function(){ 
     alert("button1") 
    }); 
});

來源

2016-04-15 16:35:52 developer

這不是問題。我只是沒有在我的例子中包括其餘的按鈕。我所擁有的是每個表格行都有3個按鈕，所以有多個按鈕class =「button1」，我希望所有的class按鈕1都有一個事件監聽器，並監聽它們何時被調用，以便我們可以用它們做一些事情@result – chonglawr

我已經添加了示例代碼檢查出來。 – developer

你有工作嗎？ – developer

如何添加一個事件偵聽器到每個按鈕的表格行結果？

回答

相關問題