Question

我面临着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>

Answer 1

因为每次调用jstree方法，DOM都会被破坏并重新创建。因此，在创建新的jstree之后，您必须再次分配侦听器。旧的只是监听不再存在的节点上的click事件。

将绑定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();
}

您可以在此fiddle

中看到这些更改

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

1 个答案: