Question

下面这个例子在悬停事件被触发时起作用，当它没有时，它对已经在DOM中的元素起作用，但是当动态创建元素时它不起作用，我意识到我需要使用jQuery live（）或delegate（）为此，事情是我试图修改它并没有按预期产生结果，这是工作代码：

$(".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个事件，相同的事件{{1实际上绑定到。

Answer 2

确保您使用的是jQuery 1.4或更高版本，according to the docs，您需要使用mouseenter和mouseleave而不是使用鼠标悬停。

如何修改这个jquery语法

2 个答案: