jQuery的LIVE，有追加，更是打破了鼠標懸停

Question

下面的代碼：

<p>Morbi vitae erat. Cras sem lorem, porta ut, aliquam id, porta sed, velit. 
Pellentesque scelerisque erat rhoncus nulla. <span class="findme">find me</span>Integer pulvinar, est ut</p> 

<script type="text/javascript"> 
$(document).ready(function() { 

    $('.findme').live('mouseover mouseout', function(event) { 
     if (event.type == 'mouseover') { 
      // do something on mouseover 
      $(this).css("background", "red"); 
      $(this).append('<span id="dropdown">XXX</span>'); 
     } else { 
      // do something on mouseout 
      $(this).css("background", "transparent"); 
      $('#dropdown').remove(); 
     } 
    }); 

}); 
</script> 

我希望有一個下拉元素旁邊會出現下一個，允許用戶更改設置時，他們把他們的鼠標過度。問題在於，當鼠標滑過XXX時，即使它位於.findme中，它也會觸發一個mouseout。任何想法爲什麼？或者更好的方法來實現這種效果？

Answer 1

嘗試使用mouseenter和mouseleave。

.live({ 
    mouseenter: 
     function() 
     { 

     }, 
    mouseleave: 
     function() 
     { 

     } 
    } 
); 

Answer 2

這是mouseout的標準行爲。如果您使用的是jQuery 1.4，那麼您應該用mouseenter/mouseleave替換mouseover/mouseout。

編輯： 一些示例代碼：

$(document).ready(function() { 

    $('.findme').live('mouseenter', function(event) { 
     $(this).css("background", "red"); 
     $(this).append('<span id="dropdown">XXX</span>'); 
    }).live('mouseleave', function(event) { 
     $(this).css("background", "transparent"); 
     $('#dropdown').remove(); 
    }); 

}); 

Answer 3

這結束了正常工作：

$(".findme").mouseenter(function(){ 
    // do something on mouseover 
    $(this).css("background", "red"); 
    $(this).append('<span id="dropdown">edit</span>'); 
}).mouseleave(function(){ 
    // do something on mouseout 
    $(this).css("background", "transparent"); 
    $('#dropdown').remove(); 
}); 

希望這有助於其他有類似需求。