JQuery doesn't recognize 'tbody' and 'tr' of datatable using hover() method

Question

So I am working with a datatable and trying to create a hover window which will display data from the datatable and a picture, not important, thing is I am trying to append a div with premade css classes for this project into either a cell or row using hover(), but jquery doesn't recognize the body and row of the datatable. Here is a fiddle I tested it on https://jsfiddle.net/r6tbv9uz/6/ and it works just fine, and here is a code I am using in the project:

$('.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');
    }
);

The thing is when I use the hover as such:

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

The hover function works perfectly but that wont help me as I need the hover out part to work within a row and only in tbody. I have tried lot of googling around and lot of trial and error but can't figure it out, if anyone has ideas i would appriciate it, Thanks.

EDIT: html snippet of the datatable:

<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>

Rows are added to the table via JS script.

Answer 1

It sounds like you are adding these elements dynamically. If that is correct, then the event handlers when they are defined are not able to attach to the elements themselves because they are not present in the DOM at the time of binding. To solve this, try using dynamic event handlers:

$('.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');
    });

I'm not aware of a way to delegate the .hover() event but according to the docs for .hover() , it is a shorthand syntax for two events: mouseenter and mouseleave , so delegating each of these should provide the same effect.