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

Jef*_*eff 7 javascript jstree

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

我还发现了一个很好的帖子,描述了将jstree-clicked类添加到<a>标记的几种方法.这看起来很有希望,但是当我尝试它时,我没有注意到任何差异.这是一个非常简单的例子:

<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>
Run Code Online (Sandbox Code Playgroud)

如果我拿出ui插件,然后点击链接就会按照预期将我带到yahoo.com.有没有人有任何想法?

Jef*_*eff 10

我想我在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;
  }) 
Run Code Online (Sandbox Code Playgroud)

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

<li id="node1">
    <a href="do-something.action">Do Something</a>
</li>
Run Code Online (Sandbox Code Playgroud)

单击该树节点将导致执行do-something操作,结果将显示在id为"contents"的div中.