почему jquery datatable не реагирует на нажатия?

Question

У меня есть таблица данных jquery, которая заполняется из ajax, но когда я щелкаю строку, обработчик события щелчка таблицы не срабатывает.Вот мои данные:

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

Полагаю, вы не включаете <tbody> в исходный html

Попробуйте добавить его к целевому селектору и делегировать его самой таблице

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

---

Обратите внимание, что $('.dataTable').on( 'click', '.dataTable', ... пытается делегировать существующему классу dataTable и будет запускаться только на других элементах с этим классом, которые находятся внутри него.Поскольку в указанном html-файле нет этого класса, неясно, каким будет этот элемент, и я сомневаюсь, что у вас есть вложенные элементы с таким же классом