JQuery Mobile does not update button styles

Question

When I try to create an element in jQuery with code like the following:

$('#grid').append('<div id="gridElement'+counter+'" class="ui-block-'+rowLetter(counter)+'"></div>');
$('#gridElement'+counter).append('<div id="gridContent'+counter+'" data-inline="true"></div>');
$('#gridContent'+counter).append('<a id="button'+counter+'" href="#" data-role="button"></a>');
$('#button'+counter).html('someButtonText');

Elements are added correctly, but JQuery Mobile styles do not execute. This approach makes sense, I know that the library does a few things in the DOM as soon as it loads, but I cannot understand how this happens in a command. Obviously, I need to instruct the JQuery Mobile library to rebuild the page, but for life I can't find anything to do with this. I managed to find several messages stating that this is a problem with individual blocks and lists, but for the page there is no grid or button at all. Is it possible now? Its still in alpha, so that might not be so.

Answer 1

http://blog.dkferguson.com/index.cfm/2011/3/15/jQuery-Mobile-styling-loaded-content, ...

Answer 2

div :

• data-role=collapsible, collapsible()
• data-role=button, button()

:

$('#bank_content div[data-role=collapsible]').collapsible();
$('#garden_content a[data-role=button]').button();

Answer 3

:

, data-role = "controlgroup" :

<ul id="my-list" data-role="listview" data-split-theme="a">
    <li class="list-element">
        <div class="listview-buttons" data-role="controlgroup" data-type="horizontal" >
            <a href="#" data-role="button" data-icon="delete" data-iconpos="top">REMOVE</a>
            <a href="#" data-role="button" data-icon="arrow-r" data-iconpos="top">SELECT</a>
        </div>  
    </li>
    <li class="list-element">
        <div class="listview-buttons" data-role="controlgroup" data-type="horizontal" >
            <a href="#" data-role="button" data-icon="delete" data-iconpos="top">REMOVE</a>
            <a href="#" data-role="button" data-icon="arrow-r" data-iconpos="top">SELECT</a>
        </div>
    </li>
</ul>

, ( ) javascript, , :

$('#my-list').listview('refresh'); //refresh listview first
$('.listview-buttons').children('a').buttonMarkup(); //refresh the buttons
$('.listview-buttons').controlgroup('refresh'); // then refresh the controlgroup

, .

Answer 4

, . .

.buttonMarkup()