Jquerymobile does not support correct rendering after dynamically adding elements _ jquery

This article mainly introduces how to solve the problem of incorrect rendering after jquerymobile dynamically adds elements. For more information, see, I hope to help you solve some problems that cannot be correctly rendered after jquerymobile dynamically adds elements:
Listview: Add jq (". detail"). listview ("refresh ");
P or others: Add. trigger ("create ");
========================================================== ====================================

Jqm inserts jqm attributes and classes in each element based on data-xxx during page initialization. After page initialization, if an element is inserted dynamically, it is often ugly because the jqm style is not inserted. This can be viewed using development tools in the browser. Some elements have many more classes, and the dynamically inserted element code is what you wrote.

To make the dynamically inserted element have a jqm style, you can trigger the create event on the jqm object:

The Code is as follows:

$ (Selector). trigger ('create ');

The create event applies to a wide range of elements (raw markup ?), For example, to insert a button

The Code is as follows:

$ ('Dy click'). appendTo ('# content'). trigger ('create ');

Some objects provide the refresh method, such as listview and flip toggle. The difference between the refresh method and the create method is that the refresh method must be applied to an existing object, as shown in figure

$ ('Ul '). listview ('refresh'), and refresh only updates the newly added elements. For example, the latest append elements in listview are updated, and the original elements remain unchanged. (I do not know whether it is understood or not. Some of them are not tested. Original http://stackoverflow.com/questions/7663078/jquery-mobile-page-refresh-mechanism

Do not use the jqm style:

If you do not want jqm to automatically initialize your elements, there are two methods. Add the data-role = "none" attribute, or configure the keepNative option in the mobileinit event.

The Code is as follows:

$ (Document). bind ('leleinit ', function (){
$. Mobile. page. prototype. options. keepNative = "select, input. foo, textarea. bar ";
});