JQuery Library调用JSTree用于生成嵌套CheckBoxes

Question

I try to use in Wordpress but it shows jstree is not a function in console At Header PHP File :

<script src="<?php echo esc_url( get_template_directory_uri() ); ?>/dist/libs/jquery.js"></script>
<link rel="stylesheet" href="<?php echo esc_url( get_template_directory_uri() ); ?>/dist/themes/default/style.min.css" />
<script src="<?php echo esc_url( get_template_directory_uri() ); ?>/dist/jstree.min.js"></script>

Inside PHP Page File :

        jQuery(document).ready(function(){
        var JSONArray = JSON.parse( '<?php echo json_encode($items); ?>' );
        var cats = JSONArray;
        var myarray = [];
        if (cats.length > 0){
            for ( var i = 0 ; i < cats.length; i++)
            {
                if (cats[i].parent == 0) {
                    cats[i].parent = '#';
                }
                myarray.push(cats[i]);
            }
            console.log('jstreetag , myarray length : ' + myarray.length);
            jQuery('#dcategories').on('changed.jstree', function (e, data) {
                    jQuery('#postCat').val(data.instance.get_node(data.selected[0]).id);
                    jQuery('#lpostCat').html(data.instance.get_node(data.selected[0]).text);
                })
                .on('loaded.jstree', treeLoaded)
                .jstree({
                    //'core' : { 'data' : myarray,"multiple" : false }
                    "core" : {
                            "data" : myarray,"multiple" : false,
                            "themes" : {
                            "variant" : "large"
                                   }
                         },
                    "checkbox" : {
                            "keep_selected_style" : false,
                            "two_state" : true
                             },
                    "plugins" : [ "wholerow", "checkbox" ]
                })
                .bind("change_state.jstree", function(e, data){ 
                    if(data.inst.get_checked().length>1){ 
                        data.inst.uncheck_node(data.rslt[0]); 
                    } 
                })
                .on('select_node.jstree', function (e, data) {
                    if (data.node.children.length > 0) {
                        jQuery('#dcategories').jstree(true).deselect_node(data.node);
                        jQuery('#dcategories').jstree(true).toggle_node(data.node);
                    }
                }) ;
        }
    });
    function treeLoaded(event, data) {
        data.instance.select_node(['<?php echo $catid; ?>']); //node ids that you want to check
    }

Also The Same Code Works on Other website, not this one

error on browser console shows jstree is not a function

Answer 1

1. jstree.min.js Not loaded before call function
2. Conflict Happened

try to use :

var noCfl = jQuery.noConflict();

and use :

noCfl(document).ready

Instead of :

jQuery(document).ready

Call :

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

At Header