javascript - 委托 mouseenter 和 click 事件不触发

Question

序幕

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

单击“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));
    });
});

我错过了什么？

标签： javascriptjqueryhtmljquery-events