JQuery: en utilisant des problèmes .live

Question

J'ai le code JQuery suivant:

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

Et réalisé qu'il est vraiment inefficace.

J'ai donc essayé ce qui suit, qui je crois est beaucoup plus d'effet; cependant, le code ne fonctionne pas:

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

Une idée de comment je peux rendre mon code plus efficace tout en travaillant?

MISE À JOUR:

A partir des réponses ci-dessous, il semble que ces deux déclarations ne sont pas equalavent.

Nouvelle question: Est-il possible d'exécuter mon code original plus efficacement?

Answer 1

Le premier code fonctionne parce qu'il lie l'événement à un sélecteur en direct.

Le second code applique un direct à un élément spécifique (le .eq(x) retourne un objet jQuery avec une collection de seulement cet élément) - il n'est pas l'appliquer à un sélecteur pour écouter dans l'avenir.

Avec la façon dont vous l'avez mis en place (chaque <li> appelant une fonction différente), je ne peux pas vraiment penser à une manière élégante d'aborder le problème.

Aussi, pourquoi utilisez-vous live pour une telle sélection spécifique? Est-ce que ces <li> ont été supprimés/ajoutés au fur et à mesure de la page?

Sauf si vous avez vraiment besoin live, je le ferais comme si ..

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

Votre code d'origine ne faites pas vraiment me sens beaucoup plus si vous allez ajouter de nouveaux éléments li à la volée .

Il ne va probablement pas se comporter comme vous le pensez.

Les 4 premières choses recevront les gestionnaires d'événements que vous voulez, tout ce qui sera ajouté plus tard, à moins qu'il ne soit ajouté de façon à ce qu'il apparaisse dans les 4 premiers points de la liste. Mais si les éléments sont ajoutés en haut de la liste, les éléments d'origine qui étaient présents ne seront pas liés/réaffectés.

Par exemple:

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

Maintenant, si vous ajoutez un nouveau li partout en cela, il ne sera pas un gestionnaire de clic (dans ce cas, vous n'avez pas besoin live). Si vous ajoutez un nouveau au milieu, cela se produira:

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

Pourquoi ne pas vous expliquer ce que vous voulez arriver sur la page afin que nous puissions aider?

Answer 3

Des mises en garde dans les docs:

méthodes DOM traversal ne sont pas entièrement pris en charge pour trouver des éléments envoyer à .live(). Au contraire, la méthode .live() doit toujours être appelée directement après un sélecteur, comme dans l'exemple ci-dessus.

L'exemple ci-dessus montre:

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

Vous devez appliquer au sélecteur, pas le DOM. Y a-t-il une raison particulière pour laquelle vous trouvez votre code original inefficace? Ça devrait être très bien. La seule suggestion que j'aurais est de retarder le filtrage:

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

En faisant cela, vous avez seulement 1 événement en direct, et le sélecteur est plus simple aussi. Le compromis traite l'instruction switch pour chaque élément cible dans votre propre code.

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

Edit: Encore plus amusant ..

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

EDIT 2

et bien sûr si vous voulez observer que la première 4 utilisation de LI ceci:

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