如何获取jstree的行元素的点击事件？答案

【问题标题】：how to get click event of row element of jstree?如何获取jstree的行元素的点击事件？
【发布时间】：2014-05-04 13:10:58
【问题描述】：

你能告诉我如何获取 jstree 的行元素的点击事件吗？我在我的小提琴中做了一个 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();

}

【问题讨论】：

标签： javascript jquery jstree

【解决方案1】：

使用这个事件监听器：

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

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

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

【讨论】：

你能用小提琴吗？
点击“tc_1”和“tc_2”等“文本”后能否展开子菜单选项
如果您的意思是如何获取节点的文本，只需使用data.node.text，而不是data.node.id。再看小提琴：jsfiddle.net/y7ar9/5
jsfiddle.net/GS4u3/8 请检查小提琴。我只想和这个小提琴一样
按“添加”按钮两到三下。然后选择它给出的任何项目。如果你选择项目并按添加它添加子菜单。直到现在它很好

【解决方案2】：

你可以使用

$(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.

【讨论】：

【解决方案3】：

我个人更喜欢事件“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);
});

【讨论】：