如何为表格行结果的每个按钮添加事件侦听器？

Question

在我的 rails 应用程序中，我从一个 @results 变量加载一个表，这样每个表行都是一个 @result。对于每个@result 表行，我希望有与@result 相关联的按钮。我正在尝试为每个按钮使用 Javascript 事件监听器，然后在 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>

    <% } %>

Answer 1

您确实可以为每个元素添加一个事件侦听器。问题是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 是按钮的数量）。

Answer 2

问题是您增加了每个className 的数字，例如button1、button2 并在javascript 中仅调用button1 类，以便调用所有button1，您需要给类button1到 HTML 中的每个按钮。

编辑：然后尝试下面的代码。

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