Question

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

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>

Answer 1

我的猜测是您没有在原始html中添加<tbody>

尝试将其添加到目标选择器，然后委派给表本身

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

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

为什么jquery数据表不响应点击？

1 个答案: