javascript - 称为 JSTree 的 JQuery 库用于制作嵌套的复选框

Question

我尝试在 Wordpress 中使用，但它在控制台中显示 jstree 不是函数 在 header PHP 文件中:

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

内部 PHP 页面文件:

        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
    }

同样的代码也适用于其他网站，而不是这个网站

浏览器控制台上的错误显示 jstree 不是一个函数

Answer 1

1. jstree.min.js 调用函数前未加载
2. 冲突发生

尝试使用:

var noCfl = jQuery.noConflict();

并使用:

noCfl(document).ready

代替:

jQuery(document).ready

调用:

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

在标题处