Javascript 为什么后续单击jstree的子项不起作用

我面临着

jstree

的问题，一旦数据更改

单击

将无法在以后每次

单击

，我需要刷新页面使其正常工作

这里是jsfiddle:

我正在用如下新数据替换

jstree

settings数据

"data" :jsondata[index]

注意：请单击渲染的子节点

下面的演示：（请使用JSFIDLE查看完整视图）

var jsondata=[
[{
“数据”：“节点1”，
“元数据”：{id:123}，
“儿童”：[“儿童11”，“儿童12”]
}],
[{
“数据”：“一个节点2”，
“元数据”：{id:223}，
“儿童”：[“儿童21”，“儿童22”]
}],
[{
“数据”：“一个节点3”，
“元数据”：{id:3223}，
“儿童”：[“儿童31”，“儿童32”]
}]
]
用newjsondata（索引）填充函数{
$（'#jstree'）.jstree({
“json_数据”：{
“数据”：jsondata[索引]
},
“插件”：[“主题”、“json_数据”、“ui”]
});
} 
var i=0；
var intid=setInterval（函数（）{
i++；
如果（i>=3）i=0；
log（'tree data changed'，jsondata[i]）；
用新的JSONDATA填充（i）；
$（'p span#spannnnnnnnn'）。文本（i）；
},9000);
$（“#jstree”）.bind(
“选择_node.jstree”，
功能（evt、数据）{
如果（data.inst.\u get\u parent（）.length，因为每次调用
jstree
方法时，DOM都会被销毁并再次创建。因此，在创建新的jstree之后，必须再次分配侦听器。旧的侦听器只会侦听不再存在的节点上的单击事件。


将绑定侦听器的代码放入
select_node.tree
事件的
addListener
函数中：

function addListener(){
     $("#jstree").bind("select_node.jstree", function(evt, data) {

          if (data.inst._get_parent().length <= 0 || data.inst._get_parent() === -1){
            console.log('clicked data', data.inst.get_json());
          } else {
            console.log('clicked data',data.inst.get_json());
          }
     });
}

使用它们：

function populateWithNewJsonData(index){
    removeListeners();

    $('#jstree').jstree({
        "json_data" : {
            "data" :jsondata[index]
        },
        "plugins" : [ "themes", "json_data", "ui" ]
    });
    addListeners();
} 

您可以在此
中看到这些更改，因为每次调用
jstree
方法时，DOM都会被销毁并再次创建。因此，在创建新的jstree后，您必须再次分配侦听器。旧的侦听器只会侦听不再存在的节点上的单击事件。


将绑定侦听器的代码放入
select_node.tree
事件的
addListener
函数中：

function addListener(){
     $("#jstree").bind("select_node.jstree", function(evt, data) {

          if (data.inst._get_parent().length <= 0 || data.inst._get_parent() === -1){
            console.log('clicked data', data.inst.get_json());
          } else {
            console.log('clicked data',data.inst.get_json());
          }
     });
}

使用它们：

function populateWithNewJsonData(index){
    removeListeners();

    $('#jstree').jstree({
        "json_data" : {
            "data" :jsondata[index]
        },
        "plugins" : [ "themes", "json_data", "ui" ]
    });
    addListeners();
} 

你可以在这本书中看到这些变化