Javascript JQuery OnHover意外工作

目标：突出显示悬停状态下主体部分的表格行

问题：当鼠标输入的td中存在非简单输入[type=text]时，鼠标悬停会出现“问题”。例如，当我的鼠标穿过包含输入[type=datetime local]的td位置进入tr时，mouseenter事件不会触发。输入[type=date]、选择、输入[type=checkbox]等也是如此

代码：

<table class="myClass">
    <thead data-bind="template: { name: 'SummaryTableHeaderTemplate'}">
    </thead>
    <tbody data-bind="template: { name: 'SummaryTableBodyTemplate', foreach: $data }">
    </tbody>
</table>

function OnHoverIn() {
    $(this).addClass("hover");
}
function OnHoverOut() {
    $(this).removeClass("hover");
}
$("table.myClass").on("mouseenter", "tr", OnHoverIn);
$("table.myClass").on("mouseleave", "tr", OnHoverOut);
$("table.myClass").on("mouseover", "tr", OnHoverIn);

函数OnHoverIn（）{
$（此）.addClass（“悬停”）；
}
函数OnHoverOut（）{
$（this.removeClass（“hover”）；
}
$（“table.myClass”）。on（“mouseenter”、“tr”、OnHoverIn）；
$（“table.myClass”）。on（“mouseleave”、“tr”、“OnHoverOut”）；
$（“table.myClass”）。on（“鼠标悬停”、“tr”、“OnHoverIn”）；

我所尝试的： 我已经尝试了很多这方面的变体，

$（“tbody tr”）。hover（…我上面的两个函数

我也尝试过不使用

“mouseover”

事件。他们的行为都一样

问题：无论tr/td中有什么内容，我如何进入/退出激活状态？

给你：

$(document).ready(function () {
    $("tr").hover(
        function() { // Hover in
            $(this).addClass("hoverClass");
        }, function() { // Hover out
            $(this).removeClass("hoverClass");
        }
    );
});

检查以下内容：

---

你能提供一个JSFIDLE吗？处理它，奇怪的是我的精确代码在JSFIDLE中不起作用哈哈？我认为我添加jQuery是错误的，但就代码而言，我认为这一切都在那里。从技术上讲，每个人都正确地回答了我的问题，因为我并不完全准确地知道问题是什么，但劳伦特的回答让我找到了问题所在，所以我把它标记为答案。嗯……这确实让我对问题有了一点了解。真奇怪。我在表中添加了不止一行，效果非常好。我不知道它为什么会这样做，即使我将问题点保留为最下面一行，但一旦我添加了更多行0，它就不再这样做了。o@Shelby115你的问题是第一排？根据您的问题，它不应该突出显示，因为您说过应该突出显示作为主体一部分的行。。第一排是头部的一部分。。因此，要么问题是错误的，要么答案是错误的：）您所做的是将

hover

函数绑定到所有

tr

元素。当在声明了

.hover

函数之后添加新元素时，这将不起作用。在这种情况下，您需要使用

.on

函数。@TilwinJoy Tbody的第一行，而不是实际的第一行（也称为header）。输入[type=datetime local]的单个td的底部时，第一行高亮显示。如果有多行，它就可以工作，所以它实际上并不重要，因为在生产中，永远不会只有一行。

$(document).ready(function () {
function OnHoverIn() {
    $(this).children().addClass("hover");
};
function OnHoverOut() {
    $(this).children().removeClass("hover");
};  

$(document).on("mouseenter", "tbody tr", OnHoverIn);
$(document).on("mouseleave", "tbody tr", OnHoverOut);
});