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渲染方法，但是页面又被更新到了执行渲染方法前的状态时，就会报错了。此时应想办法解决代码重复执行的问题。