Get attributes of element that is already hovered over on keydown

Question

I have a <tr> element with a data-id attribute. When hovering over a <td> within the row, then holding down ctrl , I would like to get the data-id from the <tr> and change the background color.

I want this event to be fired when the user holds down ctrl and is already hovering over a <td> in the <tr> , however I can not figure out a method that works.

This works if the user holds down control THEN hovers over the <td> :

$(document).on({
    mouseenter: function (e) {
        if (e.ctrlKey) {
            var row = $(this).parent();
            var id = row.data("id");
            row.addClass("danger");
            //AJAX request with id
        }
    },
    mouseleave: function () {
        var row = $(this).parent();
        row.removeClass("danger");
    }
}, ".sigData");

I have tried using the following plugin to check to see if the mouse is hovered over the <tr> when ctrl is clicked:

    (function ($) {
    $.fn.isMouseOver = function () {
        return $(this).parent().find($(this).selector + ":hover").length > 0;
    };
})(jQuery);
$(document).on("keydown", function (e) {
    if ($('.sigData').isMouseOver()) {
        var id = $(this).parent().data("id");
        $(this).parent().addClass("danger");
        //AJAX request with id
    }
})

The <tr> is added dynamically with JavaScript from an AJAX request when opening up a Bootstrap modal. Example output:

<tr data-id="8">
    <td class="sigData"><span rel="tooltip" title="John Doe">1275302</span></td>
    <td class="sigData">11/26/2015</td>
    <td class="sigData">Yes</td>
</tr>

JSFiddle Example

EDIT 1 (11/29)

For some reason I thought that $.addClass() took speed as a parameter. Removed. For clarification, the $(this).parent().data("id") is used for an AJAX request. Updated.

The JSFiddle example has been updated.

Answer 1

You should remember the last entered row a variable to have a reference when handling the CTRL key down event afterwards. When leaving the row, you should unset the reference.

My example makes use of toggleClass(classnames, state) to avoid an verbose if - else statement.

// will be set on mouseenter, unset on mouseleave
// (can be used in subsequent keyevent)
var lastRow = null;
$(document).on({
    mouseenter: function (e) {
        var row = $(this).parent();
        var id = row.data("id");

        // remember row for later key event
        lastRow = row;

        if (e.ctrlKey) {
            row.addClass("danger");
        }

        // AJAX request with id
    },

    mouseleave: function () {
        lastRow.removeClass("danger");
        // unset the reference, since we're leaving the cell (and thus potentially changing the row)
        lastRow = null;
    }
}, ".sigData");

$(document).on("keydown", function (e) {
    if (!lastRow || !e.ctrlKey) {
        // no row hovered recently or no CTRL key pressed
        return;
    }

    lastRow.toggleClass("danger", e.ctrlKey);

    var id = lastRow.data("id");
    //AJAX request with id
});

See JSFiddle (kindly provided by bnahin himself :)

Answer 2

Try removing comma , between parameters to .addClass()

$(document).on({
    mouseenter: function (e) {
        if (e.ctrlKey) {
            var row = $(this).parent();
            var id = row.data("id");
            console.log("mouseenter", id)
            row.addClass("danger fast");
        }
    },
    mouseleave: function () {
        var row = $(this).parent();
        var id = row.data("id");
        row.removeClass("danger fast");
        console.log("mouseleave", id)
    }
}, ".sigData"); //pass the element as an argument to .on
$(document).on("keydown", function (e) {
    if ($('.sigData').isMouseOver()) {
        var id = $(this).parent().data("id");
        console.log("keydown", id)
        $(this).parent().addClass("danger fast");
    }
});

jsfiddle http://jsfiddle.net/yvr0bdt0/4/