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

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

本文关键字：按钮 添加 事件 侦听器 结果      更新时间：2023-09-26

在我的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>
    <% } %>

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

问题是，您增加了每个className（如button1、button2）的编号，并在仅javascript的类button1中调用，以便调用所有button1，您需要在HTML中为每个按钮指定类button1。

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

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