Question

我有正确启动 jstree 的这个工作示例，允许浏览树结构并在用户点击节点时触发操作：https://jsfiddle.net/8v4jc14s/。

当我尝试动态加载树时，它无法正常工作：

<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>

有没有办法发起＆＃34;动态加载后的树？

Answer 1

您可以复制但不能将事件绑定到复制的元素，因为您只初始化了一个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);
            });
  }

https://jsfiddle.net/8v4jc14s/3/

Answer 2

在进一步研究期间，我发现了这个问题：How do you execute a dynamically loaded JavaScript block?

我用罗马的回答提出了下面看起来运作良好的代码。

<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>

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

整个jstree的动态负载

2 个答案: