Question

所以我正在使用数据表并尝试创建一个悬停窗口，它将显示来自数据表和图片的数据，这并不重要，我试图将这个项目的premade css类附加到一个div中使用hover（）的单元格或行，但jquery无法识别数据表的主体和行。这是我在https://jsfiddle.net/r6tbv9uz/6/测试它的小提琴，它工作得很好，这是我在项目中使用的代码：

$('.datatable-sort').find('tbody').hover(
    function () {
        console.log('hovered in');
        var iDiv = CreateHoverElement();//the div is a bit complex so I have separate function for it
        var element = $(this).closest('tr');
        element.append(iDiv);
    },
    function () {
        var element = document.getElementById('tablehover');
        element.parentNode.removeChild(element);
        console.log('hovered out');
    }
);

事情就是当我使用悬停时：

$('.datatable-sort').hover(function(){...},function(){...})

悬停功能完美无缺，但是我不需要帮助我，因为我需要将鼠标悬停在一行中并且只能在tbody中工作。我已经尝试了大量的谷歌搜索和许多试验和错误，但无法弄明白，如果有人有想法我会赞美它，谢谢。

编辑：数据表的html片段：

<table class="table table-striped datatable-sort compact fixedHeader-locked">
                <thead>
                    <tr>
                        <th scope="col">Time</th>               <!--Created-->
                        <th scope="col">Lane</th>               <!--LaneNumber-->
                        <th scope="col">Credence(%)</th>        <!--Credence-->
                        <th scope="col">LPN</th>                <!--Plate-->
                        <th scope="col">LPN(%)</th>             <!--PlateConfidence-->
                        <th scope="col">Country</th>            <!--CountryCode-->
                        <th scope="col">Country(%)</th>         <!--CountryConfidence-->
                        <th scope="col">Speed(km/h)</th>        <!--Speed-->
                        <th scope="col">Speed change(km/h)</th> <!--SpeedDifference-->
                        <th scope="col">Width(cm)</th>          <!--Width-->
                        <th scope="col">Height(cm)</th>         <!--Height-->
                        <th scope="col">Length(cm)</th>         <!--Length-->
                        <th scope="col">Weight(kg)</th>         <!--Weight-->
                        <th scope="col">Axles</th>              <!--Axles-->
                        <th scope="col">VehicleID</th>          <!--ID-->
                        <th scope="col">ClassEUR13</th>         <!--Classification-->
                        <th scope="col">Version</th>            <!--null-->
                        <th scope="col">Title</th>              <!--null-->
                        <th scope="col">Direction</th>          <!--Direction-->
                        <th scope="col">Certainty</th>          <!--null-->
                        <th scope="col">Axles Count</th>        <!--AxleCount-->
                        <th scope="col">Gross Weight</th>       <!--null-->
                        <th scope="col">Axles 1 weight(kg)</th> <!--Axles[0].Weight-->
                        <th scope="col">Axles 2 weight(kg)</th> <!--Axles[1].Weight-->
                        <th scope="col">Heading (sec)</th>      <!--Height-->
                        <th scope="col">Gap (sec)</th>          <!--Gap-->
                        <th scope="col">Digital Signature</th>  <!--null-->
                        <th scope="col">Checksum</th>           <!--Checksum-->
                    </tr>
                </thead>
            </table>

通过JS脚本将行添加到表中。

Answer 1

听起来你正在动态添加这些元素。如果这是正确的，则定义它们时的事件处理程序无法附加到元素本身，因为它们在绑定时不存在于DOM中。要解决此问题，请尝试使用动态事件处理程序：

$('.datatable-sort').on('mouseenter', 'tbody', function () {
        console.log('hovered in');
        var iDiv = CreateHoverElement();//the div is a bit complex so i have separate function for it
        var element = $(this).closest('tr');
        element.append(iDiv);
    }).on('mouseleave', 'tbody', function () {
        var element = document.getElementById('tablehover');
        element.parentNode.removeChild(element);
        console.log('hovered out');
    });

我不知道委派.hover()事件的方法，但根据.hover()的文档，它是两个事件的简写语法：mouseenter和{ {1}}，因此委托其中每一项应该会产生同样的效果。

JQuery使用hover（）方法无法识别数据表的'tbody'和'tr'

1 个答案: