Question

我正在尝试从jsTree的上下文菜单中绑定新创建的节点上的keypress事件。似乎为每个节点添加监听器都不是那么好主意。根据以下提供的评论建议编辑

$(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函数不返回DOM节点，它返回一个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：在新创建的节点上绑定keypress事件

1 个答案: