Делегировать указатель мыши и событие щелчка не срабатывает

Question

Пролог

Я пишу веб-приложение ASP.NET MVC 5.Единственный фиксированный контент в этом приложении - это панель навигации вверху, остальная часть тела динамически добавляется к элементу <div id="bodyArea"> с помощью классических Ajax-вызовов методов действий.

При нажатии на кнопку «Ricerca» ( search ) появляется форма поиска.Введите пользователь в том, что он / она ищет, нажмите Enter, и список элементов будет выглядеть следующим образом:

Это HTML-код результирующегостраница:

<div id="bodyArea" class="container min-100">
    <div id="FormRicerca"> 
         // search bar
    </div>
    <div id="EsitoRicerca">
        <table class="table table-striped">
            <thead>
                 <tr>
                     <th scope="col">...</th>
                 </tr>
            </thead>
            <tbody>
                <tr>
                    <td>...</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

Примечание: элемент <div id="FormRicerca"> генерируется, когда пользователь нажимает кнопку на панели навигации.При фактическом поиске добавляется <div id="EsitoRicerca">, содержащий результат поиска.

Требуемый вывод

Чтобы предоставить пользователям доступ к данным сотрудников без каких-либо дополнительных кнопок, я хотел сделать всестроки кликабельны, добавляя внешнюю тень при наведении курсора мыши.

Проблема

Начиная с тени, я поместил эту функцию jQuery в обычный блок $(document).ready(function () {...}), где другие рабочие функции:

$('#bodyArea').on("mouseenter", "tr", function () {
    console.log($(this));
});

, но ничего не произошло.Я подумал, что, возможно, событие mouseenter было немного «требовательным» (никогда раньше не использовалось), поэтому я начал с простого события click, чтобы проверить, было ли событие событием или проблемой привязки, но больше ничего.Далее, я поднялся выше в элементе делегата и был более конкретен в селекторе:

$('body').on("click", "table tbody tr", function () {
    console.log($(this));
});

, но, тем не менее, событие не вызывается.

РЕДАКТИРОВАТЬ:

Это весь файл .js, в котором находится функция.Два других вызова ajax работают нормально, но они добавляются на более ранней стадии:

$(document).ready(function () {
    $('body').on("click", "#AvvioRicerca", function () {
        var ambito = $('#AmbitoRicerca')[0].selectedIndex;
        var chiave = $('#ChiaveRicerca').val();
        var url = $('#AvvioRicerca').data()["url"];

        $.ajax({
            url: url,
            type: 'GET',
            data: {
                ambito: ambito,
                chiave: chiave
            }
        }).done(function (response) {
            $('#EsitoRicerca').removeClass('invisible');
            $('#EsitoRicerca').html(response);
        });
    });

    $('body').on("keypress", "#ChiaveRicerca", function (e) {
        if (e.keyCode == 13) {
            var ambito = $('#AmbitoRicerca')[0].selectedIndex;
            var chiave = $('#ChiaveRicerca').val();
            var url = $('#AvvioRicerca').data()["url"];

            $.ajax({
                url: url,
                type: 'GET',
                data: {
                    ambito: ambito,
                    chiave: chiave
                }
            }).done(function (response) {
                $('#EsitoRicerca').removeClass('invisible');
                $('#EsitoRicerca').html(response);
            });
        }
    });

    $(document).on('mouseenter', '#bodyArea tr', function () {
        console.log($(this));
    });
});

Чего мне не хватает?