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渲染方法，但是頁面又被更新到了執行渲染方法前的狀態時，就會報錯了。此時應想辦法解決代碼重復執行的問題。