Solution to incorrect rendering after jquery mobile dynamically adds Elements

Solution to incorrect rendering after jquery mobile dynamically adds Elements

This article mainly introduces how to solve the problem of incorrect rendering after jquery mobile dynamically adds elements. If you need some help, please refer to it.

After jquerymobile dynamically adds elements, some solutions cannot be correctly rendered:

Listview: Add jq (". detail"). listview ("refresh ");

Div or other: 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:

<Span style = "font-size: 18px;" >$ (selector). trigger ('create'); </span>

 

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

The Code is as follows:

$ ('<A data-role = "button"> dy button </a>'). 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 ";

});