表格中按钮上的jQuery更改事件答案

【问题标题】：jQuery change event on buttons in table表格中按钮上的jQuery更改事件
【发布时间】：2020-12-27 09:30:52
【问题描述】：

我有一个 html 表或 html 表中的数据网格。每行都有一个不同的用户信息和一个用于将文档上传给该用户的按钮。该表是在 for 循环中构建的。 jQuery 总是返回第一行的 id。

如何识别 jquery 更改事件的按钮以读取单击按钮所在行的用户 ID？

或者有没有其他方法可以解决这个问题？请指教。

<tr>
    <td>@u.FirstName</td>
    <td>@u.LastName</td>
    <td>
       <input type="file" class="uploadResume" id="ResDoc" userId="@u.ID" style="display:none" accept="application/pdf" />
       <label for="ResDoc" class="btn btn-info mr-2" style="background-color:#336084;color:white;font-size:12px;">Resume</label>
    </td>
</tr>

【问题讨论】：

标签： javascript jquery asp.net-mvc visual-studio

【解决方案1】：

我假设您还有其他列，所以我编写了 jQuery 代码来查找所有恢复按钮并让它们在单击时记录其userId。代码如下。

var uploadBtns = $(".uploadResume"); // the upload button(s)

uploadBtns.each(function() {
  $(this).click(function() {
    console.log($(this).attr("userId"));
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>@u.FirstName</td>
      <td>@u.LastName</td>
      <td>
        <input type="file" class="uploadResume" id="ResDoc" userId="@u.ID" style="display:none" accept="application/pdf" />
        <label for="ResDoc" class="btn btn-info mr-2" style="background-color:#336084;color:white;font-size:12px;">Resume</label>
      </td>
    </tr>
  </tbody>
</table>

【讨论】：

【解决方案2】：

你可以使用按钮类的 $(this) 选择器：

$(document).on("click", ".btn", function() {
  var x = $(this).siblings(".uploadResume");
  alert(x.attr("userId"));
  // do something
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
  <td>@u.FirstName</td>
  <td>@u.LastName</td>
  <td>
    <input type="file" class="uploadResume" id="ResDoc" userId="A1" style="display:none" accept="application/pdf" />
    <label for="ResDoc" class="btn btn-info mr-2" style="background-color:#336084;color:white;font-size:12px;">Resume</label>
  </td>
</tr>
<tr>
  <td>@u.FirstName</td>
  <td>@u.LastName</td>
  <td>
    <input type="file" class="uploadResume" id="ResDoc" userId="B2" style="display:none" accept="application/pdf" />
    <label for="ResDoc" class="btn btn-info mr-2" style="background-color:#336084;color:white;font-size:12px;">Resume</label>
  </td>
</tr>
<tr>
  <td>@u.FirstName</td>
  <td>@u.LastName</td>
  <td>
    <input type="file" class="uploadResume" id="ResDoc" userId="C3" style="display:none" accept="application/pdf" />
    <label for="ResDoc" class="btn btn-info mr-2" style="background-color:#336084;color:white;font-size:12px;">Resume</label>
  </td>
</tr>
</table>

【讨论】：

如果多列中有多个按钮怎么办？
它仍然会根据触发事件（在本例中为“点击”事件）的具有该类的哪个元素来检测变量。
当我使用更多列和更多具有不同userIds 的恢复按钮测试您的代码时，它只打印了第一个按钮的userId，而它应该打印出另一个按钮的@987654325 @.
我刚刚测试过，恐怕你是对的。但是，我总是这样做来选择触发事件的当前元素。它适用于我的程序。
我现在明白了。我已将选择器放在 style=display: none 的 input 元素上。它实际上是我们单击时的标签。我会编辑它。