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)')