DataTable 选择插件和 jquery 事件处理程序问题

Question

我阅读了几篇文章和jQuery API 文档，了解click() 和on('click') 除了事件委托之外没有区别。

我在我的页面中使用 Datatables 及其选择插件；我的 Html 标记和脚本与以下代码相同。

<div class='panel'>
    <table class='data-table'>
        <thead>
            <tr>
                <th>Column 1</th>
                <th>Column 2</th>
            </tr>
        </thead>
        <tbody>
            <tr data-id='1'>
                <td>Row 1, 1</td>
                <td>Row 1, 2</td>
            </td>
            <tr data-id='2'>
                <td>Row 2, 1</td>
                <td>Row 2, 2</td>
            </td>
            <tr data-id='3'>
                <td>Row 3, 1</td>
                <td>Row 3, 2</td>
            </td>

        </tbody>
    </table>
</div>

<script>
    $('table tbody tr').click(function(){
        console.log("Click(): " + $('table tr.selected').data('id'));
    });
    $('table').on('click', 'tbody tr', function() {
        console.log("On(Click()): " + $('table tr.selected').data('id'));
    });
</script>

当click() 和on('click') 相同时，我必须获得相同的控制台结果，但我得到的是在选择第一行后 (data-id=1)

On(Click()): undefined
Click(): 1

然后点击第一行的第二行

On(Click()): 1
Click(): 2

我看到on('click()') 在数据表的选择例程之前运行，click() 在相同之后运行。什么是可能的解决方案，以便 click() 和 on(click()) 在数据表选择例程之后执行。

由于我表中的数据集数量庞大，我需要应用委托，即on(click())。

更新

在事件中使用this 将允许访问获取选定行，但在数据表中第二次单击同一行将删除选择，因此两个函数的结果应该是undefined。

Answer 1

在您的 jquery 选择器中，改用 this 关键字：

$('table tbody tr').click(function(){
    if($(this).hasClass( "selected" ) == true) {
        console.log("Click(): " + $(this).data('id'));
    }
});
$('.data-table').on('click', 'tbody tr', function() {
    if (!$(this).hasClass('selected'))
        console.log("On(Click()): " + $(this).data('id'));
    else
        console.log('nothing selected');
});