Solution to jquery easyui UI re-painting after Ajax asynchronously acquires html

When Ajax asynchronously acquires htmlCodeThen, the Code contains the attributes and styles of jquery easyui, and these attributes and styles do not take effect. Here is the solution

Let's first understand what jquery easyui does when the page is refreshed or opened:

After loading HTML, jquery easyui will find the class = "easyui-XXXX" style to initialize the jquery easyui control and search forSource code, Find the following section:

(Function ($ ){
$. Parser = {Auto: True, oncomplete: function (_ 142 ){
}, Plugins: ["linkbutton", "menu", "menubutton", "splitbutton", "Tree", "ComboBox", "combotree", "numberbox ", "validatebox", "numberspinner", "timespinner", "calendar", "datebox", "layout", "Panel", "DataGrid", "tabs", "accordion ", "window", "dialog"], parse: function (_ 143 ){
VaR AA = [];
For (VAR I = 0; I <$. parser. plugins. length; I ++ ){
VaR name = $. parser. plugins [I];
VaR r = $ (". easyui-" + name, _ 143 );
If (R. Length ){
If (R [name]) {
R [name] ();
} Else {
AA. Push ({Name: name, JQ: R });
}
}
}
If (AA. Length & window. easyloader ){
VaR _ 144 = [];
For (VAR I = 0; I <AA. length; I ++ ){
_ 144. Push (AA [I]. Name );
}
Easyloader. Load (_ 144, function (){
For (VAR I = 0; I <AA. length; I ++ ){
VaR name = AA [I]. Name;
VaR JQ = AA [I]. JQ;
JQ [name] ();
}
$. Parser. oncomplete. Call ($. parser, _ 143 );
});
} Else {
$. Parser. oncomplete. Call ($. parser, _ 143 );
}
}};
$ (Function (){
If (! Window. easyloader & $. parser. Auto ){
$. Parser. parse ();
}
});
}) (Jquery );

 

After reading $. parser. parse (); isn't this a re-drawing of the jquery easyui control. When this statement is executed, jquery easyui parses the DOM of the entire page, which is relatively slow. Of course, Ajax gets only a piece of HTML asynchronously, and there is no need to parse the entire page.

When the HTML obtained asynchronously is put into a container, for example

Parameters ('{xxxx'{.html (content retrieved asynchronously). We can do this when parsing the jquery easyui control in the HTML that is retrieved asynchronously:

$. Parser. parse ($ ('# xxxx '));

In this way, only the jquery easyui control in the HTML of $ ('# XXX') is parsed.

 

This test has been passed, and this method is very reliable.