Délégation d'événement jQuery avec un balisage HTML non trivial?

Question

J'ai deux DIV, le premier contient un lien qui contient l'identifiant de la seconde DIV dans son attribut HREF (complete setup on jsbin).

Je souhaite animer le second DIV lorsque l'utilisateur clique sur le premier - n'importe où sur le premier. Je veux aussi utiliser la délégation d'événement parce que je vais avoir beaucoup de tels "couples DIV" sur une page (et j'utilise un extrait JS de ce SO answer).

Si l'utilisateur clique sur le DIV lui-même, cela fonctionnera - il suffit de vérifier la sortie de la console firebug. Le problème est que si l'utilisateur clique sur l'un des SPAN ou sur le lien lui-même, cela ne fonctionne plus.

Comment est-ce que je peux généraliser le gestionnaire de clic pour gérer des clics sur n'importe quoi dans mon DIV?

Voici le JS:

$('#a').click(function(e) { 
    var n = $(e.target)[0]; 
    console.log(n); 

    if (n && (n.nodeName.toUpperCase() == 'DIV')) { 
     var id = $(n).find('a').attr('hash'); 

     console.log(id); 
     $(id).slideToggle(); 
    } 
    return false; 
}); 

Answer 1

Il m'a fallu si longtemps pour écrire la question que j'ai décidé de poster de toute façon, peut-être quelqu'un suggère une meilleure façon.

Voici la solution que je trouve (jsbin sandbox):

$('#a').click(function(e) { 
    var n = $(e.target)[0]; 

    var name = n.nodeName.toLowerCase() + '.' + n.className.toLowerCase(); 

    if (n && (name === "div.clicker" || $(n).parents("div.clicker").length)) { 
     var id = $(n).find('a').attr('hash'); 
     if(!id) { 
      id = $(n).parents("div.clicker").find('a').attr('hash'); 
     } 
     console.log(id); 
    } 
    return false; 
}); 

Answer 2

Voici ma solution. Je ne sais pas si c'est exactement ce que tu voulais, mais ça marche pour moi.

$(document).ready(function() { 
    $('#a').click(function() { 
     var a = $("a", this); 
     $(a[0].hash).slideToggle(); 
    }); 
}); 

Edit: Testé dans les deux IE7 et Fx3

---

Edit: Dans ce cas ...

$(function() { 
    $("a.tab").click(function() { 
     $($(this).attr("hash")).slideToggle(); 
     return false; 
    }); 
}); 

Quelque chose comme ça pourrait fonctionner (mettre la classe onglet sur tout ce qui a un div "attaché" à celui-ci). Cependant, je ne suis pas sûr à moins d'en voir un exemple. Bien que si vous voulez travailler en cliquant sur la durée ... vous attacher la classe à la durée et au lieu faire:

$(function() { 
    $("span.tab").click(function() { 
     var a = $("a",this); 
     $(a.attr("hash")).slideToggle(); 
    }); 
}); 

Je ne sais pas si vous voulez un div ouvert pour fermer si un autre est ouvert . Si cela ne résout pas votre problème, il serait utile de mettre un exemple sur jsbin ...