jeasyui 造成$.data(...) is undefined报错的原因及解决

一、没有正常调用html渲染方法。

【错误代码】

var panel = $('<div data-options="tools:\'#tab-tools\'"></div>');panel.addClass('easyui-tabs');panel.addClass('tabs-container');return
panel;
【正确代码】

var panel = $('<div data-options="tools:\'#tab-tools\'"></div>');panel.tabs();
// html渲染方法return panel;
或

// 以下代码纯属理论猜想未经测试var panel = $('<div data-options="tools:\'#tab-tools\'"></div>');panel.tabs();
// html渲染方法panel.addClass('easyui-tabs');$.parser.parse(panel);return panel;
【注解】

1) 添加class='easyui-tabs'并不能直接引起panel.tabs()方法的执行，只有调用$.parser.parse()解析class='easyui-tabs'才会调用panel.tabs()。

2) jeasyui的document.ready()方法中已调用$.parser.parse()方法，所以一般我们在html中写class='easyui-tabs'时不需要再调用$.parser.parse()方法。（通过ajax动态添加的html需要调用$.parser.parse(context)方法才能正常渲染。）

二、使用子类时的bug。

【说明】

如使用propertygrid时会出现“$.data(_44e, "datagrid") is undefined”的报错，就是因为easyui设置data时使用的是propertygrid，调用父类datagrid的方法时获取data使用的是datagrid。这个似乎是easyui的bug，遇到了只能改源码了。

三、代码执行顺序错误。

【说明】

这个问题的根源和第一条其实是一样的，也是没有正常调用html渲染方法。虽然代码上看是正常调用了，但是报错当时渲染方法还没有执行到。

【解决】

把执行顺序弄对了就行。实在不行就用万恶的setTimeout把会报错的代码的执行顺序直接延迟到最后执行。

setTimeout(function(){// 要延后执行的代码},0);

四、页面更新代码重复执行。

【说明】

这个问题的根源和第一条还是一样的，虽然正常调用了一次html渲染方法，但是页面又被更新到了执行渲染方法前的状态时，就会报错了。此时应想办法解决代码重复执行的问题。

分类:
EasyUI