Динамическая нагрузка всего jstree

У меня есть этот рабочий пример 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>

Есть ли способ «инициировать» дерево после динамической нагрузки?

Доминик, в 08:15 (источник)

2 ответа

  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/

  2. В ходе дальнейших исследований я нашел вопрос: Как выполнить динамически загружаемый блок JavaScript?

    Я использовал ответ от Романа, придумавшего ниже код, который, похоже, работает хорошо.

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