JS 树链接不活跃答案

【问题标题】：JS Tree links not activeJS 树链接不活跃
【发布时间】：2011-12-04 21:02:32
【问题描述】：

我是 Jquery 和 JS Tree 的新手，但我正在学习喜欢它。我已经设定使用 php 生成的 xml 建立一个树形菜单（参见下面的代码）。它作为预期有一个例外 - 链接无效。

我知道有些基本的东西我不明白。短期我只是希望链接作为普通链接起作用。从长远来看，我希望他们触发将在页面上重新加载特定 div 的 ajax 调用。

谁能指出我正确的方向？非常感谢您的帮助！

$(function () {
        $("#mainMenu").jstree({
                xml_data : { data : <?php $menu->deliver(); ?> },
                core : { animation : 1000 }
                ui : { select_limit : 1, selected_parent_close : false },
                themes : { theme : "default", dots : true, icons : false },
                types : { types : { "heading" : { select_node : true } } },
                plugins : [ "themes", "xml_data", "ui", "types" ]
        });
});

示例 xml（单项）：

"<root><item id='pubPages_home' parent_id='0'><content><name href='?
a=pubPages&amp;f=home'>Public Home</name></content></item><root>"

【问题讨论】：

哪些链接不起作用？如果单击节点名称？你想发生什么？你能提供jsfiddle示例吗？
@Radek 节点按预期工作（打开和关闭树）。 a 标签href 不起作用。将鼠标悬停在链接上时，浏览器会识别它们，但单击不会将浏览器发送到链接。我怀疑 JS Tree 调用了 preventDefault() 来点击 a 标签。

标签： jquery jquery-plugins jstree

【解决方案1】：

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

jstree 版本：“3.0.0”， jquery: 最后

更新： 或对我来说最好的方法：

.bind("select_node.jstree", function (e, data) {
  $('#jstree').jstree('save_state');
 }) ;

.on("activate_node.jstree", function(e,data){
   window.location.href = data.node.a_attr.href;
 })

【讨论】：

【解决方案2】：

我知道这是旧的，但我来这里是为了快速修复。 Lubor Bílek 大部分是正确的，但请记住 jsTree 将绑定单击的锚元素的父 <li>。

我通过这样做解决了这个问题：

.bind('select_node.jstree', function(e,data) { 
    window.location.href = data.rslt.obj.find('a').attr("href"); 
});

这样，事件将绑定到<li> 的子<a> 而不是<li> 本身，这样您就可以在锚点而不是列表项上使用 href 属性。

【讨论】：

【解决方案3】：

我认为您需要为树节点链接显式编写点击处理程序。 JsTree 自己获取点击事件，不让它去重定向页面。

我会试着走这条路：

$('#mainMenu').bind('select_node.jstree', function(e,data) { 
    window.location.href = data.rslt.obj.attr("href"); 
});

【讨论】：

【解决方案4】：

我现在用一点蛮力解决了这个问题

<li id="child_node_1"><span onClick="javascript:window.location.href='your_page.html'" title="Lassie come home!">your text here</span></li>

又好又容易。

【讨论】：

【解决方案5】：

我试试这个代码：

window.location.href = data.rslt.obj.find('a').attr("href");

它引发 data.rslt 未定义错误，所以我无法使用它获得 href！

这是我的可用代码：

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

是不是和jstree的版本有关？我的jstree版本：3.0.0-bata10

【讨论】：

【解决方案6】：

试试这个：

jQuery("#mytree ul").on("click","li.jstree-node a",function(){
    document.location.href = this; 
});

感谢jQuery event delegation，此活动将委托给<a> elemets。如果您不使用事件委托，它只会在您第一次单击每个锚点时触发。

【讨论】：

为什么 OP 应该“试试这个”？您能否提供一个有益于 OP 以及 SO 未来访问者的解释？

【解决方案7】：

我找到了一个简单的方法。

$('#'+target).jstree({ 'core' : {
    'data' : treeInfo
} });

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

我发现 jstree 对 li 列表使用了“jstree-anchor”类。所以，我可以从 this 对象中找到 href 链接，我可以在没有任何边界函数的情况下创建这个链接。

【讨论】：

【解决方案8】：

通常我们需要同时控制“容器节点”和“子节点”的动作。

所以我们可以做类似的事情：

$("#jstree-div").jstree().delegate("a","click", function(e) {
            if ($("#jstree-div").jstree("is_leaf", this)) {
                document.location.href = this;
            }
            else {
                $("#jstree-div").jstree("toggle_node", this);
            }
        });

"is_leaf" 是 jsTree 函数之一，用于检查节点是否没有子节点。

【讨论】：