如何在jQuery中绑定多个事件？现有代码故障排查求助

先拆解下你代码里导致运行异常的几个关键问题：

1. 事件名使用错误：hover不是合法的原生事件名 #

jQuery里的hover是个合成快捷事件，本质是mouseenter+mouseleave的封装，不能直接把"hover"作为事件名传给.on()方法。如果要绑定悬停逻辑，得明确用mouseenter（鼠标进入）和mouseleave（鼠标离开）这两个原生事件名。

2. 未定义变量引发报错 #

你代码里的style1和style2是CSS类名，但直接把它们当变量用了——这会触发ReferenceError，因为根本没定义这两个变量。必须把它们改成字符串形式，用引号括起来，比如"style1"。

3. 可选优化：避免函数名冲突 #

你的hover函数名和jQuery自带的.hover()方法重名了，虽然不会直接报错，但很容易混淆，建议改成更清晰的名字，比如onDayHover。

修正后的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <style>
        td { padding: 10px; border: solid black 1px; }
        table { border-collapse: collapse; }
        .is-clicked { background-color: aqua; }
        .style1 { background-color: red; }
        .style2 { background-color: aqua; }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<div id="calendar">
    <table>
        <tr>
            <td id="1" class="day">1</td>
            <td id="2" class="day">2</td>
            <td id="3" class="day">3</td>
            <td id="4" class="day">4</td>
            <td id="5" class="day">5</td>
            <td id="6" class="day">6</td>
            <td id="7" class="day">7</td>
        </tr>
    </table>
</div>
<script>
function outpatient(elm) { 
    elm.removeClass().addClass("style1"); 
}
// 改名避免和jQuery方法冲突
function onDayHover(elm) { 
    elm.addClass("style2"); 
}

$("#calendar .day").on("click mouseenter", function(event) {
    if (event.type === "click") {
        outpatient($(this));
    } else if (event.type === "mouseenter") {
        onDayHover($(this));
    }
});

// 补充鼠标离开时移除悬停样式的逻辑
$("#calendar .day").on("mouseleave", function() {
    $(this).removeClass("style2");
});
</script>
</body>
</html>

简化写法推荐 #

如果想让悬停逻辑更简洁，也可以直接用jQuery的.hover()方法，不用手动处理两个事件：

$("#calendar .day")
    .click(function() {
        outpatient($(this));
    })
    .hover(
        function() { onDayHover($(this)); },
        function() { $(this).removeClass("style2"); }
    );

内容的提问来源于stack exchange，提问作者Heisenberg