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

Question

在我的 rails 应用程序中，我从 @results 变量加载 table，这样每个 table 行都是一个 @result。对于每个 @result table 行，我希望有与该 @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 将 return 第一个第一个匹配的元素。要获得所有这些，您可以使用 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 return 是一个 NodeList，它类似于一个数组，但不幸的是它不是一个数组。所以它没有 forEach 和 Array class 上的类似方法。因此，上面的解决方法是使用 Array.prototype.

中的 forEach 遍历节点

但是，更好的方法是在表单的父元素或容器或文档级别侦听事件。事件冒泡，这样你就可以只听一次点击事件并过滤到你想要响应的类型。那将是一个事件侦听器而不是 N 个（其中 N 是按钮的数量）。

Answer 2

问题是你增加了每个 className 的数字，比如 button1、button2 并且只调用了 javascript class button1为了调用所有 button1，您需要为 HTML.

中的每个按钮提供 class button1

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

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

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

How can I add an event listener to each button for a table row result?

javascript

ajax

jquery

ruby-on-rails

dom-events