Jquery添加类删除不处理div的类

我有两个div[id1，id2]和一个div[id3]和一个div[orig2]具有相同的类“orig”。在任何.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" />

现在单击一个按钮，我将从divid3中删除orig2类，并将orig类添加到其中。所以现在理想情况下，当我滚动ID3div时，它应该与id1和id2一起变成粉红色。但这并没有发生。当我滚动到id1或id2上时，id3变为粉红色，表示.orig类已成功添加。但是在id3上滚动没有任何作用

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

这是JSFIDLE链接：

---

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

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

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

---

谢谢你@adeneo。一旦我添加了按钮点击代码，这就非常有效了。

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