Javascript dom树更改后的jQuery事件

我正在使用jQuery事件，比如mouseover和mouseout

当用户在目标元素上触发鼠标悬停时，该元素将接收一个新类（带有removeClass和addClass）

然后，当鼠标离开时，mouseout被激发，但是具有mouseout事件的元素的选择器不再匹配，因为我更改了类

例如：

$('span.project_unsel').mouseover(function() {
    $(this).removeClass('project_unsel');
    $(this).addClass('project_sel');
});

触发上述事件后，类已更改，并且不会触发以下事件

$('span.project_sel').mouseout(function() {
    $(this).removeClass('project_sel');
    $(this).addClass('project_unsel');
});

我怎样才能让jQuery再次“更新”或“绑定”呢

---

非常感谢

我建议改为这样做，以减少混乱：

$('span.project').hover(function() {
    $(this).addClass('selected');
}, function() {
    $(this).removeClass('selected');
});

也就是说，在触发mouseenter（第一个参数）和mouseleave（第二个参数）事件时，将

.hover

绑定到类为

.project

的元素，然后简单地添加和删除

.selected

类

---

看一看。

有很多方法可以解决这个问题，但是如果您想最小化代码更改，只需向目标元素添加另一个不更改的类，然后绑定到该类即可

如果由于某种原因无法添加其他类，请尝试以下操作：

$('span.project_sel,span.project_unsel').mouseout(function() {
    $(this).removeClass('project_sel').addClass('project_unsel');
}).mouseover(function() {
    $(this).removeClass('project_unsel').addClass('project_sel');
});

如果您觉得添加/删除不美观，还可以查看

toggleClass（）

---

编辑：Karim的悬停解决方案比通过mouseout/mouseover更好。

为什么不选择按ID（或者至少不选择要更改的类名）然后添加或删除类？因为有很多这样的类，我认为“ID”应该是唯一的。但是你是对的，我应该使用“空”类来选择它们是的，应该有一个类名允许您将其作为目标。另一个已选/未选的类名。mattimus，将其作为答案发布，我会给你评分。