JQuery的：使用.LIVE问题

Question

我有以下的jQuery代码：

$("#myDIV li:eq(0)").live('click',function(){ funcA(); }); 
$("#myDIV li:eq(1)").live('click',function(){ funcB(); }); 
$("#myDIV li:eq(2)").live('click',function(){ funcC(); }); 
$("#myDIV li:eq(3)").live('click',function(){ funcD(); }); 

，并意识到它的真正效率低下。

所以我尝试了以下，我相信效果更好;然而，代码不起作用：

var tab_node = $("#myDIV li"); 
tab_node.eq(0).live('click',function(){ funcA(); }); 
tab_node.eq(1).live('click',function(){ funcB(); }); 
tab_node.eq(2).live('click',function(){ funcC(); }); 
tab_node.eq(3).live('click',function(){ funcD(); }); 

任何想法如何使我的代码更有效，同时也工作？

UPDATE：

从下面的答案，这听起来像这两个语句不equalavent。

新问题：有什么办法可以让我原来的代码更有效率吗？

Answer 1

第一个代码可以工作，因为它将事件绑定到实时选择器。

第二个代码正在申请现场到特定元素（.eq(x)返回一个jQuery对象只是元素的集合） - 这不是把它应用到一个选择听的未来。

随着你设置的方式（每个<li>调用一个不同的功能），我真的想不出一个优雅的方式来解决这个问题。

此外，为什么你使用live这样的具体选择？这些<li>在页面生活时被移除/添加了吗？

除非你真正需要live，我会做它像这样..

var tab_node = $("#myDIV li"); 
tab_node.eq(0).click(funcA); 
tab_node.eq(1).click(funcB); 
tab_node.eq(2).click(funcC); 
tab_node.eq(3).click(funcD); 

Answer 2

你原来的代码并没有真正多大意义对我来说，如果你要在飞行中要增加新的li项目。

它可能不会按照您的想法行事。

前4件事情会得到你想要的事件处理程序，任何以后添加的东西都不会，除非它被添加，以便它出现在列表中的前4个位置。但是，如果的被添加到列表的顶部，那么曾经存在的原始项目将不会被解除绑定/重新分配。

例如：

<ul> 
    <li>A</li> <!-- will call funcA when clicked --> 
    <li>B</li> <!-- will call funcB when clicked --> 
    <li>C</li> <!-- will call funcC when clicked --> 
    <li>D</li> <!-- will call funcD when clicked --> 
</ul> 

现在，如果你添加一个新的li下，任何地方，它不会得到一个点击处理程序（在这种情况下，你不需要live）。如果您在中间添加一个新的，会出现这种情况：

<ul> 
    <li>A</li> <!-- will call funcA when clicked --> 
    <li>B</li> <!-- will call funcB when clicked --> 
    <li>New thing that got added</li> <!-- will call funcC when clicked --> 
    <li>C</li> <!-- will call funcC when clicked --> 
    <li>D</li> <!-- will call funcD when clicked --> 
</ul> 

你为什么不解释一下你希望发生的页面上，这样我们就可以帮什么？

Answer 3

从文档的告诫：

DOM遍历方法不完全支持寻找元素 发送给.live（）。相反， .live（）方法应始终在选择器后面直接调用 ，如上面的示例 中所示。

上面显示的例子：

$('.hoverme').live('mouseover mouseout', function(event) { 
    if (event.type == 'mouseover') { 
    // do something on mouseover 
    } else { 
    // do something on mouseout 
    } 
}); 

您需要应用到选择，而不是DOM。是否有一个特定的原因，你发现你的原代码效率低下？它应该很好。我有唯一的建议是延迟过滤：

$("#myDIV li").live('click', function(e){ 
    // analyze the event target here to determine the actual element 
    // to do so, use $(e.target) 
}); 

通过这样做，你只得到了1个现场活动，并选择也比较简单。权衡是为您自己的代码中的每个目标元素处理switch语句。

Answer 4

$('#myDIV li').live('click' , function() { 
    var index = $(this).index(); 
    if (index == 0) funcA(); 
    if (index == 1) funcB(); 
    if (index == 2) funcC(); 
    if (index == 3) funcD(); 
}); 

编辑： 更有趣..

(function() { 
    var funcs = [funcA, funcB, funcC, funcD]; 
    $('#myDIV li').live('click' , function() { 
     funcs[$(this).index()](); // should check array boundary, but.. meh 
    }); 
}()); 

EDIT 2

，如果你想看到只有第4李娜的使用这门课程的：

$('#myDIV li:lt(4)')