向数据表添加点击事件答案

【问题标题】：Adding click events to Datatables向数据表添加点击事件
【发布时间】：2016-09-15 22:55:44
【问题描述】：

这是我的 Jquery 数据表，用于从 ajax 获取值并放置它。

$(document).ready(function() {
    $('#example').DataTable({
        "ajax": "data/arrays.txt"
    });
});

这是构造好的表。

我想给它写点击函数。我该怎么做？

<table id="example" class="table dataTable no-footer" role="grid" aria-describedby="example_info" style="width: 299px;">
    <tbody>
        <tr role="row" class="odd">
            <td class="sorting_1">TMB030</td>
            <td>Sample Collected</td>
        </tr>
        <tr role="row" class="even">
            <td class="sorting_1">TMB033</td>
            <td>Sample Collected</td>
        </tr>
    </tbody>
</table>

我想将点击事件写入角色="row" 并在其上获取值TMB030。

我该怎么做？

我试过这样

$(document).ready(function() {
    $('#example').DataTable({
        "ajax": "myOrders/" + Cookies.get('userSession')
    });
    $("div[role='row']").click(function() {
        alert('clicked')
    });
});

但它没有被触发我该怎么做？请帮忙

【问题讨论】：

不应该是tr[role='row']吗？

标签： javascript php jquery html datatables

【解决方案1】：

应该是这样的：

$( document ).on("click", "tr[role='row']", function(){
    alert($(this).children('td:first-child').text())
});

简要说明：

在初始页面加载时（即执行document.ready 回调函数时），数据表元素（行和列等）尚未出现在 DOM 树中。它们是在运行时创建以响应数据更改。因此document.click方法中提供的回调函数不会绑定到任何元素（即div[role='row']）。
要克服它，可以使用.on 方法。它将回调函数绑定到 DOM 中已经存在的元素的单击事件以及动态创建的元素。

【讨论】：

为您的答案添加更多描述
已添加说明。

【解决方案2】：

如果你通过ajax加载你的表格，也许最好使用dataTable的“initComplete”函数，那么当你完全确定所有行都存在时，你可以将事件绑定到表格中的任何元素。

$('#example').DataTable({
    "ajax": "myOrders/" + Cookies.get('userSession'),
    "initComplete": function () {
            $( document ).on("click", "tr[role='row']", function(){
                 alert($(this).children('td:first-child').text())
            });
        }
});

【讨论】：

【解决方案3】：

将您的点击更改为：

 $( "tr[role='row']" ).on("click",function(){
     alert($(this).find("td:first-child").text());
});

示例：

$(document).ready(function() {


  $("tr[role='row']").on("click",function() {
    alert($(this).find("td:first-child").text());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="example" class="table dataTable no-footer" role="grid" aria-describedby="example_info" style="width: 299px;">
  <tbody>
    <tr role="row" class="odd">
      <td class="sorting_1">TMB030</td>
      <td>Sample Collected</td>
    </tr>
    <tr role="row" class="even">
      <td class="sorting_1">TMB033</td>
      <td>Sample Collected</td>
    </tr>
  </tbody>
</table>

【讨论】：

【解决方案4】：

.click 事件不会绑定在动态元素上，在您的情况下，行将在 ajax 调用之后加载。

所以把代码改成下面

$("tr[role='row']" ).on('click', function(){
  alert('clicked')
});

【讨论】：

【解决方案5】：

试试看：

$( document ).on("click", "#example tr[role='row']", function(){
       alert($(this).children('td:first-child').text())
});

【讨论】：