如何获取jstree的row元素的click事件?

时间:2014-05-04 13:10:58

标签: javascript jquery jstree

请告诉我如何获取jstree的row元素的click事件? 我在小提琴中制作了一个jstree的演示。它是在面板中制作的。你必须按“打开面板”按钮检查面板

我想点击jstree元素的事件来点击它的id? 为了准备树,我必须多次按“添加测试用例按钮”,然后按“打开面板”按钮。

这是我的小提琴 http://jsfiddle.net/ZLe2R/6/

function addMenuItemsOfTestSuit(id){

 var menuid = "menu_" + id;
       var ref = $('#tree').jstree(true);
        alert('thank')
    ref.create_node("#", {"id" : menuid, "text" : id});

        ref.deselect_all();

}

3 个答案:

答案 0 :(得分:24)

使用此事件监听器:

$('#tree').on("select_node.jstree", function (e, data) { alert("node_id: " + data.node.id); });

查看jsTree API events以获取事件列表。

编辑:创建了一个小提琴:http://jsfiddle.net/y7ar9/4/

答案 1 :(得分:4)

您可以使用

$(document).on('click', '.jstree-anchor', function(e) {...});

您可能希望将点击处理程序移动到其自己的函数,并从锚点的父级获取id

$(document).on('click', '.jstree-anchor', function(e) {
    var anchorId = $(this).parent().attr('id');
    var clickId = anchorId.substring(anchorId.indexOf('_') + 1, anchorId.length);
    onMenuItemClick(clickId, e);
});
$(document).on('click', '.clickTestCaseRow', function (e) {
    onMenuItemClick(this.id, e);
});
function onMenuItemClick(clickId, e) {
    hideDisplayView();
    displayNewView(clickId);
    e.stopPropagation();
}

<强> Here is a fiddle.

答案 2 :(得分:1)

我个人喜欢事件'activate_node'。如果您对节点选择更改进行回发并重新加载页面并且仍然选择该节点,则不会导致另一个事件触发,从而导致无限回发循环。

$('#jstree').on('activate_node.jstree', function (e, data) {
     if (data == undefined || data.node == undefined || data.node.id == undefined)
                return;
    alert('clicked node: ' + data.node.id);
});