Javascript 整棵树的动态负载

我已经正确启动了jstree的这个工作示例，允许浏览树结构并在用户单击节点时触发操作：

当我尝试动态加载树时，它不起作用：

<div id="container">
<button onclick="load()">Load tree</button>
</div>
<script>
$(function () {
    $('#tree_div')
        .jstree()
        .on('changed.jstree', function (e, data) {
            alert(data.selected);
        });
});
function load() {
    document.getElementById("container").innerHTML = "<div id=\"tree_div\"><ul><li id=\"Root\">Root<ul><li id=\"Sub\">Sub</li></ul></li></ul></div>";
}
</script>

负载树
$（函数（）{
$（“#tree_div”）
.jstree（）
.on（'changed.jstree'，函数（e，数据）{
警报（数据选择）；
});
});
函数加载（）{
document.getElementById（“container”）.innerHTML=“
Root
Sub
”；
}

---

动态加载后是否有方法“启动”树？

您可以复制，但无法将事件绑定到复制的元素，因为您只初始化了jstree的一个实例

如果需要另一个jstree，则需要创建另一个实例

您可以检查以下内容：

    $(function () {
        $('#tree_div')
            .jstree()
            .on('changed.jstree', function (e, data) {
                alert(data.selected);
            });


      attach();

      second();
    });

  //just copies UI
  function attach(){
  var $elem = $("#tree_div").clone(true, true);
   $("#myTest").append($elem);
  }

  //for another instance
  function second(){
    $('#yourTest')
            .jstree()
            .on('changed.jstree', function (e, data) {
                alert(data.selected);
            });
  }

---

在进一步的研究中，我发现了这个问题：

我使用了Roman的答案，得出了下面的代码，看起来运行良好

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>

<div id="container">
<button onclick="load()">Load tree</button>
</div>

<script>
function load() {
    // Clear container DIV to avoid adding tree div multiple times on multiple clicks
    document.getElementById('container').innerHTML = "<button onclick=\"load()\">Load tree</button>";
    // Creating new DIV element
    var newdiv = document.createElement('div');
    // Creating a jstree structure under newly created DIV
    newdiv.innerHTML = "<div id=\"tree_div\"><ul><li id=\"Root\">Root<ul><li id=\"Sub\">Sub</li></ul></li></ul></div>";
    // Creating new SCRIPT element
    var script = document.createElement('script');
    // Creating SCRIPT element content
    script.innerHTML = "$(function () {$('#tree_div').jstree().on('changed.jstree', function (e, data) {alert(data.selected);});});";
    // Adding SCRIPT element to newly created DIV
    newdiv.appendChild(script);
    // Finally updating "container" DIV
    document.getElementById('container').appendChild(newdiv);
}
</script>

负载树
函数加载（）{
//清除容器DIV以避免在多次单击时多次添加树DIV
document.getElementById（'container'）.innerHTML=“加载树”；
//创建新的DIV元素
var newdiv=document.createElement（'div'）；
//在新创建的DIV下创建jstree结构
newdiv.innerHTML=“
Root
Sub
”；
//创建新的脚本元素
var script=document.createElement（'script'）；
//创建脚本元素内容
script.innerHTML=“$（函数（）{$（'#tree_div'）.jstree（）.on（'changed.jstree'，函数（e，data）{alert（data.selected）；}）；”；
//将脚本元素添加到新创建的DIV
newdiv.appendChild（脚本）；
//最后更新“container”DIV
document.getElementById（'container'）.appendChild（newdiv）；
}

---

希望这能帮助像我这样迷失在JS之谜中的人：）

你好，尼特什。谢谢你的回复。我想我在描述目标时不够精确。目标是拥有与我的工作示例中完全相同的树，但是动态加载。如果您使用简单的innerHTML，它不会被启动-JS不起作用。与此同时，我找到了一个解决办法。我将在几分钟后发布它。多米尼克