如何將多重mouseenter事件與Jquery結合起來？

Question

我正在試圖製作一個多鼠標進入爲元素添加類的子元素。 但不幸的是它不工作...

這裏的代碼示例以及它在做什麼。 http://js.do/Aleqxs/fonction_html

首先mousenter改變我LIGNE「NOIR ET BLANC」到「紅與黑」 我的第二mousenter應該在紅色變換「胭脂扣」 ......但是，這並不工作。

Answer 1

的問題是在我看來，一個複製粘貼錯誤，您使用

$(".change_into_red").mouseenter(function(){ 
$(".this").addClass("red"); 
}); 

當它應該是

$(".change_into_red").mouseenter(function(){ 
$(this).addClass("red"); 
}); 

而且，當您試圖加入這一行的HTML

var code_avec_html = '<span class="change_into_red">ROUGE</span> ET NOIR'; 

在jQuery的html函數中是這樣的

$(this).html(code_avec_html); 

它將努力顯示HTML，然而，打算在該HTML類工作的任何活動都只有他們工作委託。您當前的設置僅分配一次這些事件。爲了讓這些事件也適用於未來的元素，您需要使用delegate函數進行委派。

$("body").delegate(".change_into_red", "mouseenter", function() { 
$(this).addClass("red"); 
}); 

$("body").delegate(".change_into_red", "mouseleave", function() { 
$(this).removeClass("red"); 
});