jquery mobile cannot render correctly after dynamically adding elements. Solution description_jquery

Solution to the problem that some elements cannot be rendered correctly after jquerymobile dynamically adds them:
listview: Add jq(".detail").listview("refresh");
div or others :Add .trigger( "create" );
======================================== =================================

When jqm initializes the page, it will insert jqm attributes and classes into each element according to data-xxx. After the page is initialized, if an element is dynamically inserted, the display is often ugly because there is no jqm style inserted. You can use the development tools in the browser to check this. You will find that some elements have many more classes, but the dynamically inserted element code is still the same as you wrote it.

If you want to make dynamically inserted elements have jqm styles, you can trigger the create event on the jqm object:

Copy code Code As follows:

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

The create event has a wide range of applications, and can even be non-existent elements (raw markup?), such as inserting a button

Copy code The code is as follows:

$('dy button').appendTo('#content').trigger('create ');

Some objects provide refresh methods, such as listview and flip toggle. The difference from create is that the refresh method needs to act on an existing object, such as

$('ul').listview('refresh'), and refresh will only update newly added elements. For example, the latest appended elements in the listview will be updated, and the original ones will remain unchanged. (I don’t know if I understood it wrong, some of them have not been tested. Original texthttp://stackoverflow.com/questions/7663078/jquery-mobile-page-refresh-mechanism

Do not use jqm style:

If you don’t 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

Copy the code The code is as follows:

$(document).bind('mobileinit',function(){
$.mobile.page.prototype.options.keepNative = "select, input.foo, textarea.bar";
});