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(); });

我知道如何在提高工作效率的同时提高我的代码效率吗？

更新

从下面的答案中，听起来这两个陈述并不是平等的。

新问题：有没有办法让我的原始代码更有效率？

Answer 1

$('#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 }); }());

编辑2

当然，如果你只想观察前4个LI的用法：

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

Answer 2

第一个代码有效，因为它将事件绑定到实时选择器。

第二个代码是对一个特定元素应用实时（.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 3

如果您要即时添加新的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 4

来自文档中的警告：

查找元素不完全支持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语句。

JQuery：使用.LIVE问题

4 个答案: