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