javascript - 将点击事件添加到数据表

Question

这是我的 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>

我想将点击事件写入 role="row"并获取其值 TMB030。

我该怎么做？

我试过这样

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

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

Answer 1

应该是这样的:

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

简要说明:

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