时间戳

首页 > 解决方案 > 为什么随后单击 jstree 的子级不起作用

javascript - 为什么随后单击 jstree 的子级不起作用

问题描述

我遇到了问题jstree，一旦数据更改click后将无法正常工作click，我需要刷新页面以使其正常工作

这是jsfiddle：http: //jsfiddle.net/2Jg3B/2121/

我正在用jstree新数据替换设置数据，如下所示

"data" :jsondata[index]

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

下面的演示：（请使用 jsfiddle 查看完整视图http://jsfiddle.net/2Jg3B/2121/）

var jsondata =  [
                [{
                    "data" : "A node 1",
                    "metadata" : { id : 123 },
                    "children" : [ "Child 11", "A Child 12" ]
                }],
                 [{
                    "data" : "A node 2",
                    "metadata" : { id : 223 },
                    "children" : [ "Child 21", "A Child 22" ]
                }],
                [{
                    "data" : "A node 3",
                    "metadata" : { id : 3223 },
                    "children" : [ "Child 31", "A Child 32" ]
                }]
            ]


function populateWithNewJsonData(index){
     $('#jstree').jstree({
        "json_data" : {
            "data" :jsondata[index]
        },
        "plugins" : [ "themes", "json_data", "ui" ]
    });
} 
var i = 0;
var intid = setInterval(function(){
   i++;
   if(i >= 3) i = 0;
   console.log('tree data changed',jsondata[i]);
   populateWithNewJsonData(i);
   $('p span#spannnnnnn').text(i);
},9000);


 $("#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());
       }
 });
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://old.static.jstree.com/v.1.0pre/jquery.jstree.js"></script>
<p>
tree data changed with index : <span id="spannnnnnn"></span> data
</p>
<div id="jstree">
</div>

标签： javascriptjqueryjstree

解决方案

因为每次调用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());
          }
     });
}

在销毁 jstree 之前创建函数以删除侦听器：

function removeListeners(){
    $("#jstree").unbind("select_node.jstree");
}

使用它们：

function populateWithNewJsonData(index){
    removeListeners();

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

你可以在这个小提琴中看到这些变化

推荐阅读