Question

我有2个div [id1，id2]，具有相同的类'orig'和一个div [id3]和'orig2'。鼠标悬停在任何.orig上使得所有div [id1，id2]变为粉红色，而.orig2使div [id3]变为绿色。

<div id="id1" class="orig">Some Text</div>
<div id="id2" class="orig">Second Div of name 1</div>
<div id="id3" class="orig2">Third div</div>
<input type="button" id="btn1" value="CLICK ME" />

滚动时的Jquery

 $('.orig').on('mouseenter',function () {
  $('.orig').css('background-color', '#e31b3f');
 });

$('.orig').on('mouseleave',function () {
 $('.orig').css('background-color', '#7d7d7d');
});

$('.orig2').on ('mouseenter', function () {
 $('.orig2').css('background-color', '#80bd3c');
});
$('.orig2').on('mouseleave',function () {
 $('.orig2').css('background-color', '#464646');
});

现在点击按钮我将从div id3中删除orig2类并向其添加orig类。所以现在理想情况下，当我滚动id3 div时，它应该变成粉红色以及id1和id2。但这不会发生。当我滚动id1或id2时，id3变为粉红色，表示已成功添加.orig类。但滚动id3什么都不做。

$('#btn1').on('click', function () {
 $('#name2').addClass('orig');
 $('#id3').removeClass('orig2');
});

这是jsFiddle链接：http://jsfiddle.net/monologish/Eprym/

这是我的问题的简化版本，我尝试在持有者div中添加一个全新的div，但没有任何改变。我不明白为什么会这样。

Answer 1

事件处理程序在绑定处理程序时附加到与选择器匹配的元素，因此更改元素类不会删除旧的事件处理程序，也不会使先前附加到新类的事件处理程序开始工作。为此，您必须将事件处理程序重新连接到与选择器匹配的新元素，或者使用附加到父元素的委托事件处理程序，在执行期间检查选择器，如下所示：

$(document).on({
    mouseenter: function () {
        $('.orig').css('background-color', '#e31b3f');
    },
    mouseleave: function () {
        $('.orig').css('background-color', '#7d7d7d');
    }
}, '.orig');

FIDDLE

Jquery添加类删除类不在div上工作

1 个答案: