Fork me on GitHub

zTree报错 : Uncaught TypeError: Cannot read property 'init' of undefined

出现这个问题基本上都是$.fn.zTree对象undefined,没有加载

看网上的说法很多都是父页面与子页面,jQuery与zTree相关js的位置问题,但是我这边是单页面,所以不是这种原因,继续寻找。。。

 

 

因为这里是使用了require.js延迟加载,之前写法如下(只保留了关键代码):

require.config({
    urlArgs: "date=" + _Config_.date.getDate(),
    paths: _PATH_,
    shim: {
        "easyui-core": {
            deps: ["jquery"],
            exports: "easyui-core"
        },
        "easyui": {
            deps: ["easyui-core"],
            exports: "easyui"
        },
        "ztree-core":{
            exports:"_"
        },
        "ztree-exedit":{
            exports:"_"
        },
        "ajaxFileupload":{
            deps: ["jquery"],
            exports:"ajaxFileupload"
        }
    }
});

require(['easyui',"ajaxFileupload","ZeroClipboard","ztree-core","ztree-exedit"], function(ZeroClipboard {
  
  var setting = {};

  function loadTree(data) {
     var treeObj = $("#menuTree");
     $.fn.zTree.init(treeObj, setting, data);
  }
}

      有怀疑是因为延迟加载,导致zTree相关js未加载导致错误,因此使用setTimeout,等待数秒后执行loadTree(),然而并没有效果;

 

  一直寻找答案,在http://blog.csdn.net/u013026207/article/details/52105966这篇博文里提到jquery与zTree版本冲突,但是我这里是不存在版本冲突的,但是想到zTree是依赖jQuery的,但是require.config里面并没有,遂加上这段代码

require.config({
    urlArgs: "date=" + _Config_.date.getDate(),
    paths: _PATH_,
    shim: {
        ...
        "ztree-core":{
            deps: ["jquery"],    //此处必须依赖jquery,不加的话$.fn.zTree对象经常无法加载
            exports:"_"
        },
        "ztree-exedit":{
            deps: ["jquery"],
            exports:"_"
        },
        ...
    }
});

  ok!不再报错

 

  总结:出现这个问题还是因为使用了require.js延迟加载zTree相关js,但没有指定依赖,所以这个问题不一定很具有代表性,因为是接手的代码,也不知道开发者为什么这么写;这边先记录下来,以后用到require.js的时候记得不要再犯同样的错误

posted @ 2017-04-18 18:55  夏天海岸线  阅读(22607)  评论(0编辑  收藏  举报