Dynamic load of whole jstree

Question

I have this working example of jstree properly initiated allowing to browse through tree structure and trigger action when user clicks the node: https://jsfiddle.net/8v4jc14s/.

When I try to load the tree dynamically it's not working:

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

Is there a way to "initiate" the tree after dynamic load?

Answer 1

You can copy but you cannot bind events to copied element since you have initialized only one instance of jstree.

If you want another jstree, you need to make another instance.

You can check this:

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

During further research I have found this question: How do you execute a dynamically loaded JavaScript block?

I have used answer from Roman coming up with below code that looks to be working well.

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

Hope this helps others like me lost in mysteries of JS :)