在IE瀏覽器中jQuery衝突懸停/切換狀態？

這裏是我的代碼：在IE瀏覽器中jQuery衝突懸停/切換狀態？

<!doctype html> 
<html> 
<head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<style type="text/css"> 
    label {display:block; width:300px; height:20px;} 
    label.selected{background-color:#a33;} 
    label.hover{background-color:#ccc;} 
</style> 
</head> 
<body> 

<label> 
    <input type="checkbox" />Test text 
</label> 


<script type="text/javascript"> 
$("label input").change(function(){ $("label").toggleClass("selected"); }); 
$("label").hover(function(){ 
    $("label").addClass("hover"); 
    }, function(){ 
    $("label").removeClass("hover"); 
}); 
</script> 

</body> 
</html>

除了顯而易見的事實，我的廣泛類名和內聯代碼是不理想（這是從一個代碼塊較大的快速提取），我有另外一個問題。

在IE7和IE 6中，當您將鼠標懸停在標籤上時，顏色會按預期更改。但是，當您選中複選框並懸停時，直到您在頁面上的空白區域或其他元素上單擊，您的顏色纔會更改爲「選定」類的背景顏色。

轉到並取消選中該複選框，並且所選顏色再次殘留，直到您單擊。將一個開關添加到toggleClass不會改變問題。

當然，這在現代瀏覽器（如Chrome和FF）中的預期效果。有什麼想法發生在這裏？

來源

2009-10-19 dmrnj

IE不會觸發「更改」事件，直到元素上的焦點丟失。嘗試綁定到「點擊」而不是「更改」。

來源

2009-10-19 19:42:42 Pointy

好通話！我在所有錯誤的地方尋找問題的根源。萬分感謝。 – dmrnj 2009-10-19 19:50:40

在IE瀏覽器中jQuery衝突懸停/切換狀態？

回答

相關問題