jQuery的奇怪閃爍/出

Question

的HTML：

<div id="timerList"> 
... 
    <li rel="project" class="open"> 
     <a class="" style="" href=""><ins>&nbsp;</ins>Project C</a> 
    </li> 
... 
</div> 

的JavaScript/jQuery的：

$('#timerList li[rel="project"]').mouseover(function(){ 
    $('a:first',this).after('<span class="addNew"><a href="#">Add Timer</a></span>'); 
}).mouseout(function(){ 
    $('.addNew',this).remove(); 
}); 

當我將鼠標懸停我的鼠標懸停在li元素，一個span.addNew元素內創建

問題： 當我將鼠標放在span.addNew上時，它會閃爍。也許鼠標事件正在觸發，但我不明白爲什麼它會或如何防止它。

謝謝！

Answer 1

可以使用.hover()功能，像這樣：

$('#timerList li[rel="project"]').hover(function(){ 
    $('a:first',this).after('<span class="addNew"><a href="#">Add Timer</a></span>'); 
}, function(){ 
    $('.addNew',this).remove(); 
}); 

.hover()是一樣的使用​​和.mouseleave()。 mouseover和mouseout事件在輸入子元素時觸發，使用mouseenter和mouseleave不會執行此操作，從而消除由刪除和添加跨度導致的閃爍。

You can read more about the differences here：

的mouseenter事件從mouseover區別它處理事件冒泡的方式。如果在本例中使用mouseover，那麼當鼠標指針移到Inner元素上時，處理程序將被觸發。這通常是不受歡迎的行爲。另一方面，mouseenter事件只在鼠標進入綁定的元素時觸發其處理程序，而不是後代。所以在這個例子中，當鼠標進入Outer元素時觸發處理程序，但不是Inner元素。

Answer 2

這可能是因爲jquery不知道你的新元素是DOM的一部分，因此不能識別mouseover。我不確定，但在這種情況下，您可能需要jquery的live。

或者，您可能不想創建此元素，然後將其刪除，但可以先創建它，但將display：none設置爲。然後隱藏/取消隱藏元素。