jQuery 事件只绑定一次

【问题标题】：jQuery events are only binding oncejQuery 事件只绑定一次
【发布时间】：2026-02-17 12:25:01
【问题描述】：

我有希望一直绑定的 mouseover 和 mouseout 事件。即，如果我将鼠标悬停在一个元素上，然后鼠标悬停，然后鼠标悬停，等等，这些事件处理程序仍应触发。我应该如何解决这个问题？现在它们只绑定一次....

    $welcome = $("#welcome");
    $welcomeClone = $("#welcome").clone();

    $welcome.mouseover(function() {
        $welcome.css("height","400px");
    });

    $welcome.mouseout(function() {
        $welcome.hide();
        $("#vertical-center").append($welcomeClone)
    });

【问题讨论】：

你的意思是你是$welcome的新附加克隆没有任何事件..
哦，这很有道理。我应该如何解决这个问题？
看看 .bind() 或 .on() 函数的

标签： jquery events mouseover mouseout

【解决方案1】：

原因是因为每个mouseout 都隐藏了$welcome 元素 - 然后将其克隆附加到#vertical-center - 克隆的元素没有相同的事件处理程序。您应该使用事件委托：

$welcome = $("#welcome");
$welcomeClone = $("#welcome").clone();

$("#vertical-center").on("mouseover", "#welcome", function() {
    $(this).css("height", "400px");
}).on("mouseout", function() {
    $(this).hide();
    $("#vertical-center").append($welcomeClone)
});

【讨论】：