How to get I get leaf nodes in jstree to open their hyperlink when clicked when using jstree ui

I display a hierachial structure using jtree, the data is as follows

<div id="songchanges"><ul>
<li id="phtml_1">
<a href="#">C:</a>
<ul>
<li id="phtml_2">
<a href="#">Music</a>
<ul>
<li id="phtml_3">
<a href="#">Z</a>
<ul>
<li id="phtml_4">
<a href="#">Hans Zimmer</a>
<ul>
<li id="phtml_5"><a href="FixSongsReport_00107_2013-09-04-11-11-55_body_blqxgT7E7YOmnBbjFXQGUg==.html">C:\Music\Z\Hans Zimmer\Hannibal</a></li>
</ul>
</li>
<li id="phtml_6">
<a href="#">The Zombies</a>
<ul>
<li id="phtml_7"><a href="FixSongsReport_00107_2013-09-04-11-11-55_body_er7mjWKbAaYaf8DygP84Fg==.html">C:\Music\Z\The Zombies\Best of The Zombies</a></li>
<li id="phtml_8"><a href="FixSongsReport_00107_2013-09-04-11-11-55_body_56XgVDhsjEKWXFd4OzVldA==.html">C:\Music\Z\The Zombies\The Zombies featuring Colin Blunstone & Rod Argent</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

and it displays okay, as a filesystem.

This is the part of a frameset and is displayed on the left handside of the screen and when user clicks on leaf node I want it to open the attached link on the right handside (as it does before i applied jtree stuff to it)

My jtree configuration is as follows

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" type="text/css" href="songkong.css">
<base target="main">
<script type="text/javascript" src="http://static.jstree.com/v.1.0pre/jquery.js"></script>
<script type="text/javascript" src="http://static.jstree.com/v.1.0pre/jquery.cookie.js"></script>
<script type="text/javascript" src="http://static.jstree.com/v.1.0pre/jquery.hotkeys.js"></script>
<script type="text/javascript" src="http://static.jstree.com/v.1.0pre/jquery.jstree.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script type="text/javascript" class="source below">
$(function () {
$("#songchanges")
.jstree({
"plugins" : ["themes","html_data","ui","crrm","hotkeys"],
"core" : { "initially_open" : [ "phtml_1" ] }
})
.bind("loaded.jstree", function (event, data) {
});
$("#songchanges").bind("open_node.jstree", function (e, data) {
data.inst.select_node("#phtml_1", true);
});
});
</script></head>

I read demo3 example

$(function () {
    $("#demo3")
        .jstree({ "plugins" : ["themes","html_data","ui"] })
        // 1) if using the UI plugin bind to select_node
        .bind("select_node.jstree", function (event, data) { 
            // `data.rslt.obj` is the jquery extended node that was clicked
            alert(data.rslt.obj.attr("id"));
        })
        // 2) if not using the UI plugin - the Anchor tags work as expected
        //    so if the anchor has a HREF attirbute - the page will be changed
        //    you can actually prevent the default, etc (normal jquery usage)
        .delegate("a", "click", function (event, data) { event.preventDefault(); })
});

and tried it but the .delegate option had no effect , I assume i have to remove"ui" plugin but trying that my page just looks like Ive never applied jstree.

The bind option sort of worked, in that it displays an annoying alert window displaying the id every time i click on any node. So how can I change it to open the link in the right handside instead ?

Update Found this answer Jstree nodes don't work when ui plugin is used

Adding

  .bind("select_node.jstree", function (e, data) {
    var href = data.rslt.obj.children("a").attr("href");
    // this will load content into a div:
    $("#contents").load(href);
    // this will follow the link:
    document.location.href = href;
  })

Now the link is opened when clicked on, unfortunately it replaces the lefthandside frame with the page, whereas I want it put it into the right hand pane, any ideas.

for new versions;

$("#demo2").jstree().bind("select_node.jstree", function (e, data) {
     var href = data.node.a_attr.href;
     document.location.href = href;
});

I know this post is kinda old, but here what I did to make this work :

html:

<div id="entryPointTree">
    <ul>
        <li>Produits des mains
           <ul>
              <li><a href="http://www.google.ca" class="jstree-clicked">Lien 1</a></li>
              <li>item 2</li>
           </ul>
        </li>
        <li>Produits des pieds</li>
    </ul>
</div>

js:

$(document).ready(function() {
    $("#entryPointTree").jstree({ "plugins" : ["themes","html_data","ui"] });
    $("#entryPointTree li").on("click", "a", 
        function() {
            document.location.href = this;
        }
    );
});

Try This.

$("#demo2").jstree().bind("select_node.jstree", function (e, data) { 
        var href = data.rslt.obj.children("a").attr("href"); 
        document.location.href = href; 

      //  $("#the_div").load(href); 
    }) ;

My solution for v3.3.4, it works fine!

tree.jstree().on("click", ".jstree-anchor", function() {
    document.location.href = this.href;
});

None of the other answers do what I want: multiple <a> tags in the title of the node. This is what worked for me:

HTML

<div id="object-tree">
  <ul>
     <li>SomeTitle <a href="/link1" target="_blank">link1><a href="/link2" target="_blank">link2</a></li>
  </ul>
</div>

Javascript

jQuery('#object-tree').jstree().bind("select_node.jstree", function (e, data) {
  // Allow links to work from within jstree nodes
  window.open( jQuery(data.event.originalEvent.originalTarget).attr('href'), '_blank');
});

来源：https://stackoverflow.com/questions/18611317/how-to-get-i-get-leaf-nodes-in-jstree-to-open-their-hyperlink-when-clicked-when

标签

javascript

html

jstree