委托mouseenter和click事件不会触发

Question

序言

我正在编写一个ASP.NET MVC 5 Web应用程序。此应用程序中唯一固定的内容是顶部的导航栏，正文的其余部分都通过经典的Ajax对动作方法的调用而动态地附加到<div id="bodyArea">元素上。

单击“ Ricerca”（搜索）按钮时，将显示搜索表单。用户键入他/她正在寻找的内容，按回车键，则显示项目列表，如下所示：

这是结果页面的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));
    });
});

我想念什么？