Jquery mobile cannot render the solution correctly after dynamically adding elements

  • 2020-03-30 02:12:35
  • OfStack

There are some solutions to querymobile's dynamic addition of elements that cannot be rendered correctly:
Listview: add jq(".detail"). Listview ("refresh");
Div or something else: add a. Trigger ("create");
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

When JQM initializes the page, attributes and classes of JQM are inserted into each element according to data-xxx. When an element is inserted dynamically after the page initialization is over, it is often ugly because there is no style to insert JQM. This can be viewed using the development tools in the browser, and you will find that some elements have many more classes, while the code for the dynamically inserted elements is still the same as what you wrote.

If you want a dynamically inserted element to look like JQM, you can fire a create event on a JQM object:


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

Create events can be as broad as nonexistent elements (raw markup?). , for example, to insert a button

$('<a data-role="button">dy button</a>').appendTo('#content').trigger('create');

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

$('ul').listview('refresh'), and refresh will only update the newly added elements, such as the latest append element in the listview. Some of them were not tested. The original (link: http://stackoverflow.com/questions/7663078/jquery-mobile-page-refresh-mechanism)

No JQM style:


Related articles: