javascript - Jstree nodes don't work when ui plugin is used - Stack Overflow

admin管理员组

文章数量:1279116

I've found that using the ui plugin breaks the links for the tree nodes. This isn't anything new, I've found references to this problem elsewhere. The first cause was a problem with v1.6 of the jquery validation plugin. I'm not using that plugin, so that can't be the cause.

I also found a good posting describing a few ways of adding the jstree-clicked class to the <a> tag. That looked promising, but when I tried it I didn't notice any difference. Here is a very simple example:

<div id="treediv">
    <ul>
        <li id="page1"><a href="" class="jstree-clicked">YAHOO!</a></li>        
    </ul>
</div>
<script type="text/javascript" class="source">
$(function () {

$("#treediv")
    .jstree({
        "core" : {
            "animation" : 0
        },
        "themes" : {
            "theme" : "classic" 
        },
        "plugins" : [ "themes", "html_data", "cookies", "ui" ] 
    });
});
</script>

If I take out the ui plugin, then clicking the link takes me to yahoo as expected. Does anyone have any ideas?

I've found that using the ui plugin breaks the links for the tree nodes. This isn't anything new, I've found references to this problem elsewhere. The first cause was a problem with v1.6 of the jquery validation plugin. I'm not using that plugin, so that can't be the cause.

I also found a good posting describing a few ways of adding the jstree-clicked class to the <a> tag. That looked promising, but when I tried it I didn't notice any difference. Here is a very simple example:

<div id="treediv">
    <ul>
        <li id="page1"><a href="http://www.yahoo." class="jstree-clicked">YAHOO!</a></li>        
    </ul>
</div>
<script type="text/javascript" class="source">
$(function () {

$("#treediv")
    .jstree({
        "core" : {
            "animation" : 0
        },
        "themes" : {
            "theme" : "classic" 
        },
        "plugins" : [ "themes", "html_data", "cookies", "ui" ] 
    });
});
</script>

If I take out the ui plugin, then clicking the link takes me to yahoo. as expected. Does anyone have any ideas?

• javascript
• jstree

Share Improve this question Follow edited Jan 26, 2016 at 22:21 BenMorel 36.6k5151 gold badges205205 silver badges336336 bronze badges asked Feb 2, 2011 at 21:58 JeffJeff 18911 silver badge55 bronze badges 1

• Does ui plugin still exist on v3.+? – wonsuc Commented Apr 3, 2019 at 4:29

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

I think I found the answer on the jstree discussion group. I believe that the ui plugin allows the nodes to be "selected", but the click doesn't pass through to the anchor tag. So, I have to bind a function to be executed whenever a node is selected. I acplished this with a .bind like the following:

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

As a side benefit, this example also showed me how easy it is to click on a tree node and show dynamic contents in another div. For example, suppose the tree node was defined as follows (using html_data jstree plugin and struts2):

<li id="node1">
    <a href="do-something.action">Do Something</a>
</li>

Clicking on that tree node will cause the do-something action to be executed, and the results will be displayed in the div with the id "contents".

本文标签： javascriptJstree nodes don39t work when ui plugin is usedStack Overflow