如何修改這個jQuery語法

Question

當懸停事件被觸發時，下面的例子可以工作，而當鼠標懸停事件不起作用時，它對已經存在於DOM中的元素起作用，但是當動態創建元素時，它不起作用，我意識到我需要為此使用jQuery live（）或委托（），事情是我試圖修改它，並且它沒有產生預期的結果，這是工作代碼：

$(".sidebar li").hover(
         function(){
        $(this).css("background-color", "#F9F4D0");
        $(this).append($('<button class="promoter" type="button" title="Active promotion"></button>'));
                  },
        function(){
        $(this).css("background-color", "#F9FAFA");
        $(this).children("button").remove();
                 }    
                     );

這是我想添加直播但未產生正確結果的地方：

$(".sidebar li").live('hover', function(){
        $(this).css("background-color", "#F9F4D0");
        $(this).append($('<button class="promoter" type="button" title="Active promotion"></button>'));
                  },
        function(){
        $(this).css("background-color", "#F9FAFA");
        $(this).children("button").remove();
                 }    
                     );

我在哪里弄錯了，謝謝

Answer 1

你可以這樣做：

$(".sidebar li").live('mouseenter', function(){
    $(this).css("background-color", "#F9F4D0");
    $(this).append($('<button class="promoter" type="button" title="Active promotion"></button>'));
}).live('mouseleave', function(){
    $(this).css("background-color", "#F9FAFA");
    $(this).children("button").remove();
});

.live('hover', function() {})簡寫適用於$(this).children().slideToggle()東西，但是為此，您需要直接使用mouseenter和mouseleave事件，相同事件.hover()實際上綁定到了。

Answer 2

確保您使用的是jQuery 1.4或更高版本，並且根據docs ，您需要使用mouseenter和mouseleave而不是將鼠標懸停。