Question

我试图使用jQuery获取表行的值。当我在控制台上尝试相同的jQuery代码并且在我尝试单击之后，即选择该行并给出我期望的正确值。但我不知道为什么它没有从我的JavaScript文件中运行。但其他功能正在使用相同的JavaScript文件

＆＃13;

$(".chequeTable tbody tr").click(function() {
  alert('Vendor ID ==');
  $('.selected').removeClass('selected');
  $(this).addClass("selected");

  alert('Vendor ID ==' + $('.tdVendorID').html());

  $(this).css("background-color", "#000000");
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-hover FilterTable chequeTable table-striped" id="queryTable">
  <thead>
    <tr>
      <th>S.No</th>
      <th>VendorID</th>
      <th>VendorName</th>
      <th>ReqNo</th>
      <th>ChequeAmount</th>
      <th>VendorBalance</th>
      <th>Balance</th>
      <th>Description</th>
      <th>StockValue</th>
      <th>Yes/No</th>
    </tr>
  </thead>
  <tbody>
    <tr class="">
      <td class="tdSno">1</td>
      <td class="tdVendorID">6000 </td>
      <td class="tdVendorName">john</td>
    </tr>
  </tbody>
</table>

＆＃13;

Answer 1

在jquery中初始化click事件时，很可能表不存在。你动态构建表吗？

尝试将click事件直接绑定到表而不是tr：

$(".chequeTable").on("click", "tr", function() { ... });

仅当table.chequeTable在HTML中时才有效。

解释原因：
jquery documentation for on()

它表示它将事件绑定到选择器中的所有元素。这意味着，不在选择器中的元素（例如，任何尚未出现的tr）都不会收到该事件。为此，您必须绑定容器上的click事件并检查所单击的子元素是什么。无论如何，这更加性能，因为你只附加一次点击事件而不是100次（如果你有100个tr元素）

Answer 2

您可以使用解决方案

＆＃13;

$("table.chequeTable").on('click', 'tr', function() {
  alert('Vendor ID ==');
  $('.selected').removeClass('selected');
  $(this).addClass("selected");

  alert('Vendor ID ==' + $('.tdVendorID').html());

  $(this).css("background-color", "#000000");
});

$('tbody').append(`<tr class="">
      <td class="tdSno">1</td>
      <td class="tdVendorID">6000 </td>
      <td class="tdVendorName">john</td>
    </tr>`);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-hover FilterTable chequeTable table-striped" id="queryTable">
  <thead>
    <tr>
      <th>S.No</th>
      <th>VendorID</th>
      <th>VendorName</th>
      <th>ReqNo</th>
      <th>ChequeAmount</th>
      <th>VendorBalance</th>
      <th>Balance</th>
      <th>Description</th>
      <th>StockValue</th>
      <th>Yes/No</th>
    </tr>
  </thead>
  <tbody>
    
  </tbody>
</table>

＆＃13;

您需要执行事件委派，因为您的行是动态生成的。

参考文档： Event delegation

希望这会对你有所帮助。

为什么我的表tr单击功能不是在jQuery中调用？

2 个答案: