0

我有 2 个具有相同类“orig”的 div [id1，id2] 和一个具有“orig2”的 div [id3]。鼠标悬停在任何 .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，但没有任何改变。我不明白为什么会这样。

4

1 回答 1

2

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

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

小提琴

于 2013-03-02T17:06:28.583 回答