dom树更改后的jQuery事件

我正在使用jQuery事件，如mouseover和mouseout。dom树更改后的jQuery事件

当用户在目标元素上触发mouseover时，此元素接收一个新类（使用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“更新”或“绑定”了吗？

非常感谢！

来源

2010-11-18 oimoim

为什么不选择ID（或至少不是你改变的类名）然后添加删除类？ – m4tt1mus 2010-11-18 23:10:13

，因为这里有不少，而且我认为“id”应该是唯一的。 – oimoim 2010-11-18 23:47:14

但你是对的，我应该用一个“空”类来选择它们 – oimoim 2010-11-18 23:47:36

我建议做这样的事情，而不是，以使事情变得容易混淆：

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

也就是说，绑定.hover与类.project元素，简单地添加和删除.selected上课的时候了mouseenter（第一个参数）和mouseleave（第二个参数）事件被触发。

看一看.hover。

来源

2010-11-18 23:12:20 karim79

有很多方法可以解决这个问题，但是如果你想最小化你的代码更改，你可以添加另一个类到你没有改变的目标元素，然后绑定到那个。

如果您不能出于某种原因增加一个额外的类，试试这个：

$('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做更好。

来源

2010-11-18 23:12:47

dom树更改后的jQuery事件

回答

相关问题