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

Question

I have a jquery datatable that populates from ajax but when I click on a row, the table click event handler does not fire. Here is my datatable:

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.      
    });
}

I've tried a couple different click events like this:

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

And like this:

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

And like this:

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

But neither one fires. Here is the html for it:

        <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

My guess is you aren't including a <tbody> in the original html

Try adding it to the target selector and delegating to the table itself instead

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

---

Note that $('.dataTable').on( 'click', '.dataTable', ... is trying to delegate to an existing class dataTable and would only be triggered on other elements with that class that are inside it. Since nothing in the html shown has that class it's not clear what that element would even be and I doubt you have nested elements with same class