Question

我正在帮朋友尝试设置jsTree。我们正试图在单击节点时将页面加载到另一个div中。但是，一切似乎都在起作用，但.load由于某种原因不会触发。我使用alert来检查thisItem并且它已被定义并且是正确的变量。

$(function() {

    $('.tree').jstree().delegate("a", "click", function(event, data){
        event.preventDefault();
        var thisItem = $(this).attr('id');
        thisItem += ".html";
        alert(thisItem);
        $('.table').load(thisItem);
        });

});

这是HTML：

<div class = "tree">  
    <ul>
    <li id = "1"><a href = "" id = "1">Test 1</a>
        <ul>
        <li id = "2"><a href = "" id = "2">Test 2</a></li>
        </ul>
    </li>
    </ul>
</div>
<div class = "table">
</div>

我的页面与我要加载到table的这些ID相对应。这可以在没有常规.click的jstree的情况下工作......但是我想将它与jstree一起使用。

我无法弄清楚为什么在使用jstree时它不会加载页面...但是当我不使用jstree时它会工作。我甚至尝试在jstree之外的.click上做.tree li，但这也不起作用。（如果我将这些代码全部放在一起，这里的代码就可以了。）

$('.tree li').click(function() {
        var thisItem = $(this).attr('id');
        thisItem += ".html";
        $('.table').load(thisItem);
    });

注意：这只是对项目中更具活力的一部分的测试。

Answer 1

您可以通过将自定义事件（some-event.jstree）绑定到jstree元素来执行您自己的代码，在这种情况下您要查找的元素是select_node.jstree：

$('.tree').bind("select_node.jstree", function (e, data) {
   var $obj = data.rslt.obj; // this will be a jquery object representing the <li> you've clicked
   var url = $obj.attr("id") + ".html";
   $('.table').load(url);
});

有关传递给回调函数的data对象的信息（来自jstree documentation）：

{
   "inst" : /* the actual tree instance */,
   "args" : /* arguments passed to the function */,
   "rslt" : /* any data the function passed to the event */,
   "rlbk" : /* an optional rollback object - it is not always present */
}

希望这有帮助。

Answer 2

点击此处的第一个演示：http://www.jstree.com/documentation/core#demos

您的点击处理程序不起作用，因为我相信插件本身取消绑定点击处理程序，因为它们使用自己的自定义事件。您可以通过与第一个演示中相同的方法绑定到这些事件中。

$("#demo1").jstree("toggle_node","#phtml_1");
$("#demo1").bind("open_node.jstree close_node.jstree", function (e) {
    //Stuff
});

事件似乎遵循“ function .jstree”形式。因此open_node.jstree事件在open_node函数发生后触发。您可以在上面的同一链接上找到功能列表。

.load with jsTree

2 个答案: