使用 jQuery 1.3.2 进行事件委托

Question

我现在一直在使用 jQuery 1.3.2，而且我才刚刚开始了解事件委托。但我似乎无法让任何类型的事件委托来处理这段代码。我有一个带有“聊天”类的 ul，当悬停在其中一个 li 上时，它应该创建一个新的跨度，然后滑出，然后在鼠标离开 li 时滑回。

此代码有效，但我想使用事件委托：

$('ul.chat li').hover(
    function() {
        $(this).append($('<span class="join">Join Conversation</span>'));
        setTimeout(function() {
            $('.join').animate({'width': '150px'}, 400);
        },500);
    },
    function() {
        $('.join').animate({'width': '0px'}, 200, function(){
            $(this).remove();                                             
        }); 
    }
);

有人可以告诉我如何实现相同的结果，但使用事件委托吗？ 谢谢。

Answer 1

更新：您似乎不想为添加的项目委托事件，但更多的是因为您将处理非常大的结果集。

在 Google 上快速搜索（“事件委托 jquery 1.3.2”）找到了this。

---

您可以通过jQuery.live() 事件获得“事件委托”。

您必须将其拆分为两个绑定，如下所示：

$('ul.chat li').live('mouseover',
    function() {
        $(this).append($('<span class="join">Join Conversation</span>'));
        setTimeout(function() {
            $('.join').animate({'width': '150px'}, 400);
        },500);
    }
).live('mouseout',
    function() {
        $('.join').animate({'width': '0px'}, 200, function(){
            $(this).remove();                                             
        }); 
    }
);