jsTree：在新创建的节点上绑定按键事件

Question

我正在尝试通过 jsTree 的上下文菜单在新创建的节点上绑定按键事件。似乎为每个节点添加监听器并不是一个好主意。根据下面提供的评论的建议进行编辑

$(function () {
        $('#demo').jstree({
             ...
              "contextmenu":{         
                    "items": function($node) {
                        var tree = $("#demo").jstree(true);
                        return {
                            "Create": {
                                "separator_before": false,
                                "separator_after": false,
                                "label": "Create",
                                "action": function (obj) { 
                                    var newNode = createNode($node,tree);
                                    //tree.edit(newNode);

                        tree.edit(newNode, null, function (the_node, rename_status) {

                            console.log("status:"+rename_status);
                        });
                                   }
                            }
                            }
                        };
                    }
                }

            })
    });




function createNode($node,tree)
   {
      $newNode = tree.create_node($node); //create new node
      return $newNode;
   }

Answer 1

jstree create_node 函数不是 return 一个 DOM 节点，它 return 是一个 ID 字符串，如此处所述：http://www.jstree.com/api/#/?q=create_node&f=create_node%28[obj,%20node,%20pos,%20callback,%20is_loaded]%29

为了能够附加您需要 DOM 节点的任何事件，因此将您的 createNode 函数重写为：

function createNode($node,tree) {
    $newNode = tree.create_node($node); //create new node
    return tree.get_node($newNode, true);
}

还要记住，如果你像这样附加一个处理程序，如果这个节点的父节点关闭然后打开，它将会丢失，因为 jstree 仅在 DOM.如果这对您来说不合适 - 使用事件委托，例如将事件附加到树容器。

根据下面的评论，更好的解决方案是使用 edit 回调（前提是您使用的是 jstree v.3.1.1 或更高版本）：

tree.edit(newNode, null, function (the_node, rename_status) {
  // any custom logic you need
})

这是使用编辑回调和 v.3.1.1 的最终演示： http://jsfiddle.net/DGAF4/498/

如果使用早期版本或者您不关心捕获对 rename_node 的调用 - 监听 rename_node.jstree 事件 - 这是响应名称更改的首选方法。

jsTree：在新创建的节点上绑定按键事件

jsTree: bind keypress event on a newly created node

jstree

addeventlistener

onkeypress