Comment ajouter un événement click à la liste asynchrone de jstree (jQuery plugin)?

Question

Je souhaite ajouter l'événement click aux éléments de liste asynchrones jstree. Le résultat idéal est: lorsque je clique sur les éléments dans le jstree, le contenu de l'élément sera transféré à une requête SQL en tant que paramètre, puis, la requête est exécutée et affiche un ensemble de résultats dans la même page ou dans une autre page.

Bien que je ne sais pas comment l'implémenter. J'ai trouvé le code suivant dans jquery.tree.js. Et je pense que je devrais modifier l'événement. Mais je ne sais pas comment. Pouvez-vous voir le code et me donner des suggestions ou des conseils?

$("#" + this.container.attr("id") + " li a") 
.live("click.jstree", function (event) { // WHEN CLICK IS ON THE TEXT OR ICON 
    if(event.which && event.which == 3) return true; 
    if(_this.locked) { 
    event.preventDefault(); 
    event.target.blur(); 
    return _this.error("LOCKED"); 
    } 
    _this.select_branch.apply(_this, [event.target, event.ctrlKey || _this.settings.rules.multiple == "on"]); 
    if(_this.inp) { _this.inp.blur(); } 
    event.preventDefault(); 
    event.target.blur(); 
    return false; 
    }) 

Le code de la page:

<script type="text/javascript" > 
    $(function() { 
     $("#async_json_1").tree({ 
      data : { 
       type : "json", 
       opts : { 
        url : "twodimen.php" 
       } 
      }, 
      callback:{ 
       onselect: function(node,tree){ 

       } 
      } 
     }); 
    }); 
</script> 

Merci beaucoup.

Answer 1

Vous pouvez utiliser la méthode de rappel onselect qui a généralement lieu lorsque le nœud est cliqué (même si vous pouvez le sélectionner par script)

si vos nœuds (Li) ont une carte d'identité de la forme « node_1234 », puis:

<script type="text/javascript" > 
$(function() { 
    $("#async_json_1").tree({ 
    data : { 
    type : "json", 
    opts : { 
    url : "twodimen.php" 
    } 
    }, 
    callback: { 
     onselect: function(node, tree) { 
     var id = $(node).attr("id").split("_")[1]; // that is 1234 
     $.ajax({ 
      url: "your/url", 
      data: "id="+id, 
      success: function(data){ 
       alert("Great"); 
      } 
     }); 
     } 
    } 
    }); 
}); 
</script> 

---

Je viens de réaliser, qu'il ya aussi une façon encore plus simple de faire ce que vous avez besoin:

<script type="text/javascript" > 
$(function() { 
    $("#async_json_1").tree({ 
    data : { 
    type : "json", 
    opts : { 
    url : "twodimen.php" 
    } 
    } 
    }); 
    $(".tree a").live("click", function(e) { 
    // your code here 
    }) 
}); 
</script> 

Answer 2

.delegate("a","click", function(e) { 
     console.log($(this).parent().attr("id").split("_")[1]); //get ID of clicked node 
    })