Динамическая нагрузка всего 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>

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

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 🙂