Comment obtenir l'élément cliqué dans une arborescence JQuery créée dynamiquement?

Question

J'ai une base de données de produits avec plusieurs catégories de produits. Chaque catégorie a un certain nombre de sous-catégories, qui a sous-sous-catégories, ce qui a ... Eh bien, certains niveaux profonds. L'arbre est trop volumineux pour être chargé en même temps, j'ai donc besoin de le construire dynamiquement lorsque les utilisateurs sélectionnent des catégories de produits spécifiques. Voici un aperçu de l'arborescence des produits. Initialement, seul le premier niveau est chargé. Le deuxième niveau (Cat 1.1 et Cat 1.2) est ajouté lorsque l'utilisateur clique sur Cat. 1:

<ul id="navigation"> 
    <li id="625212">Product cat. 1 
     <ul> 
     <li id="625213">Product cat. 1.1 
      <ul></ul> 
     </li> 
     <li id="625109">Product cat. 1.2 
      <ul></ul> 
     </li> 
     </ul> 
    </li> 
    <li id="624990">Product cat. 2 
     <ul></ul> 
    </li> 
</ul> 

J'ai l'intention d'étendre l'arborescence lorsque les utilisateurs cliquent sur des catégories de produits spécifiques. Je peux obtenir la liste des sous-catégories à partir d'une URL qui prend l'ID de la catégorie de produit parent en entrée et qui sort le HTML dans le format requis par treeview. Je ne peux pas utiliser PHP et je dois le faire fonctionner avec l'événement .click(). Voici le code que j'ai:

$(document).ready(function(){ 

    function doSomethingWithData(htmldata, id) { 
     var branches = $(htmldata).appendTo("#navigation #"+id+" ul"); 
     $("#navigation").treeview({ add: branches }); 
    } 

    $("#navigation").treeview({ 
     collapsed: true, 
     unique: true, 
     persist: "location" 
    }); 

    $("#navigation li[id]").click(function() { 
     var id=$(this).attr("id"); 
     if ($("#"+$(this).attr("id")+" ul li").size()==0) { 
     $.get('someurl?id='+$(this).attr("id"), 
      function(data) { doSomethingWithData(data, id); }) 
     } 
    }); 

}); 

Le problème que j'ai est avec l'événement click. En cliquant sur le chat 1.1. pour l'étendre d'un niveau plus profond, il renvoie toujours l'ID de la catégorie de produit de premier niveau.

Comment est-ce que je peux changer les événements de clic de sorte qu'il renverra l'ID du <LI> cliqué au lieu du premier?

Si la catégorie de produit ne comporte aucune sous-catégorie, comment puis-je supprimer le <UL></UL> et ainsi indiquer que l'arborescence ne peut plus être étendue?

Answer 1

Pour ne renvoyer qu'un LI, je pense que vous allez devoir utiliser le code ci-dessous. Cela ne correspondra qu'à l'enfant de l'UL, qui est le LI sur lequel vous cliquez.

$('#navigation ul > li').click(function() { 
     alert($(this).attr('id')); 
}); 

Pour supprimer les UL, pouvez-vous vérifier si quelque chose est retourné dans le $ .get? Donc je suppose que votre fonction clic ressemblerait à quelque chose comme ceci:

MISE À JOUR - Cela sélectionnera même le haut li:

$('#navigation').click(function(e) { 

    var element = $(e.target); 
    if (element.context.nodeName === 'LI') 
    { 
     var id = element.attr('id'); 
     if ($('#' + id + ' ul li').size()==0) 
     { 
      $.get('someurl?id='+ id, 
       function(data) 
       { 
       // data could = undefined or something else, just check what 
       // it looks like when it comes through empty and match that 
       if (data != null) 
       { 
        doSomethingWithData(data, id); 
       }  
       else 
       { 
        $('#' + id).children('ul').remove(); 
       } 
       } 
      ); 
     } 
    } 

    });