为啥 jquery 数据表不响应点击？

Posted 2023-03-14

【中文标题】为啥 jquery 数据表不响应点击？

【英文标题】：why won't jquery datatable respond to click?为什么 jquery 数据表不响应点击？

【发布时间】：2018-10-28 14:48:18

【问题描述】：

我有一个从 ajax 填充的 jquery 数据表，但是当我单击一行时，表单击事件处理程序不会触发。这是我的数据表：

function initDataTables(watchlist) 
    $('#watchlistTable').DataTable(
        ajax: 
            url: "/MoneyMachine/getWatchlist.php",
            type: "post",
            data: watchlist:watchlist
        ,
        columns: [
             data: 'Symbol' ,
             data: 'CompanyName' ,
             data: 'ClosePrice', class: 'text-right' ,
             data: 'PricePctChangeToday', class: 'text-right',
             data: 'CAGR', class: 'text-right',
             data: 'BenchmarkCAGR', class: 'text-right',
             data: 'DivYield', class: 'text-right',
             data: 'ExDivDate',
             data: 'AppreciationPotential', class: 'text-right'
        ],    
        responsive: true,   //supposedly make table clickable but does nothing
        destroy: true       //A data table can only be initialized once.  It must be destroyed so it can be initialized again.      
    );

我尝试了几个不同的点击事件，如下所示：

$('.dataTable').on( 'click', '.dataTable', function () 
    console.log("watchlistTable was clicked");
);

像这样：

$('#watchlistTable tbody').on( 'click', 'tr', function () 
    console.log("watchlistTable was clicked");
);

像这样：

$('.display').on( 'click', '.display', function () 
    console.log("watchlistTable was clicked");
);

但是没有人开火。这是它的html：

        <table id="watchlistTable" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Sym</th>
                <th>Company Name</th>
                <th>Price</th>
                <th>Change%</th>
                <th>CAGR</th>
                <th>Benchmark<br>CAGR</th>
                <th>Div<br>Yield%</th>
                <th>Ex-Div<br>Date</th>
                <th>App<br>Pot%</th>
            </tr>
        </thead>
        </table>

【参考方案1】：

我猜你在原始 html 中没有包含 <tbody>

尝试将其添加到目标选择器并委托给表本身

$('#watchlistTable').on( 'click', 'tbody tr', function () ...

---

请注意，$('.dataTable').on( 'click', '.dataTable', ... 正在尝试委托给现有类 dataTable，并且只会在其中包含该类的其他元素上触发。由于显示的 html 中没有任何内容具有该类，因此甚至不清楚该元素是什么，我怀疑您是否嵌套了具有相同类的元素

【讨论】：

我只是添加了它，但没有任何区别。

确保它被包装在一个就绪事件处理程序中，然后$(function() /* code here */)

这是我的 $(document).ready(function() var watchlist = new watchlistPage(); 在包含的 watchlist.js 文件中有 initDataTables("All Stocks");所以我知道它被击中了，因为表格填充正确。

最坏情况可以委托给文档$(document).on( 'click', '#watchlistTable tbody tr', function ()

注意我在' tbody tr' 中错误地添加了一个额外的空间。应该删除前导空格