Jquery add class删除类不工作div

Question

我有2个div [id1，id2]具有相同的类'orig'和一个div [id3]'orig2'。在鼠标悬停在任何.orig使所有divs [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类和添加原稿类吧。所以现在理想情况下，当我滚动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