jQuery庫調用JSTree使用，使嵌套的複選框

Question

我嘗試在WordPress的使用，但它顯示在控制檯 jstree is not a function在頭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 is not a function

Answer 1

1. jstree.min.js通話功能之前沒裝
2. Conflict正巧

嘗試使用：

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> 

在頭