删除的课程似乎仍然存在

Question

我有一个按钮，可以使用这个脚本切换menue的类：

$('#btn-menue').click(function () {
$('#menue').toggleClass('hoverbutton clickbutton');
}

我开始的课程是“.hoverbutton”，并且切换似乎有效（用firebug检查）。但是当活动类是“.clickbutton”时，这个脚本虽然有效（虽然控制台输出是clickbutton）：

$(".hoverbutton").on({
    mouseenter:  function () {
    console.log($(this).attr('class'));
  }

那么我的推理错误在哪里？恕我直言，“。hoverbutton”上的脚本在删除类时不起作用。 THX可以提供任何帮助。

Answer 1

问题是因为当 元素具有hoverbutton类时，事件被绑定在页面加载上。在页面生命周期的后期删除该类的事实与此无关;该事件已绑定到该元素。要执行您需要的操作，您需要使用事件委派。试试这个：

$(document).on('.hoverbutton', 'mouseenter', function () {
    console.log($(this).attr('class'));
});

请注意，我仅以document为例。在生产代码中，您应该使用与页面加载时DOM中.hoverbutton元素最接近的静态元素。

Answer 2

罗里的回答几乎是正确的。他使用旧委托方法的参数顺序

jQuery 1.4.3 +：

$( elements ).delegate( selector, events, data, handler );

jQuery 1.7 +：

$( elements ).on( events, [selector,] [data,] handler );

修复示例：

$(document).on('mouseenter', '.hoverbutton', function () {
    console.log($(this).attr('class'));
});

Answer 3

删除课程并不会删除页面加载时已添加的事件。如果要在jQuery中删除事件侦听器，则需要使用.off（）

你可以举例如：

$('#btn-menue').click(function () {
    $('#menue').toggleClass('hoverbutton clickbutton');
    $('#menue).off("mouseenter");
}