使用ui插件时Jstree节点不起作用

Question

我发现使用 ui 插件会破坏树节点的链接。这不是什么新鲜事，我在其他地方找到了对此问题的参考。第一个原因是 jquery 验证插件 v1.6 的问题。我没有使用该插件，所以这不是原因。

我还发现了一篇很好的帖子，描述了将 jstree-clicked 类添加到 标记的几种方法。这看起来很有希望，但当我尝试时，我没有注意到任何区别。这是一个非常简单的示例：

<div id="treediv">
    <ul>
        <li id="page1"><a href="http://www.yahoo.com" 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>

如果我取出 ui 插件，则单击链接将按预期转到 yahoo.com。有人有什么想法吗？

Answer 1

我想我在 jstree 讨论组中找到了答案。我相信 ui 插件允许“选择”节点，但单击不会传递到锚标记。因此，我必须绑定一个在选择节点时要执行的函数。我使用如下所示的 .bind 完成了此操作：

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

作为附带好处，此示例还向我展示了单击树节点并在另一个 div 中显示动态内容是多么容易。例如，假设树节点定义如下（使用 html_data jstree 插件和 struts2）：

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

单击该树节点将导致执行 do-something 操作，结果将显示在 id 为“contents”的 div 中”。