JQuery Mobile не обновляет стили кнопок

Question

Когда я пытаюсь создать элемент в JQuery с кодом, подобным следующему:

$('#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');

Элементы добавлены правильно, но стили JQuery Mobile не выполняются. Это имеет смысл, я знаю, что библиотека делает несколько вещей с DOM, как только она загружается, но я не могу придумать, как это сделать по команде. Очевидно, что мне нужно дать указание библиотеке JQuery Mobile перестроить страницу, но, на самом деле, я не могу найти ничего, чтобы сделать это вообще. Мне удалось найти несколько сообщений о том, что это проблема с полями выбора и списками, но нет ничего общего для страницы, сеток или кнопок. Возможно ли это даже сейчас? Он все еще в альфа-версии, поэтому может и не быть.

Answer 1

Вместо обновления всей страницы div вы можете сделать это:

• , если вы пытаетесь обновить data-role=collapsible, используйте функцию collapsible()
• , если выпытаясь обновить data-role=button, используйте функцию button()

Примеры:

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

Answer 2

Вот что сработало в моем случае:

У меня есть просмотр списка с различными элементами, каждый из которых имеет 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 3

Я хочу добавить к этому, если вы пытаетесь обновить контрольную группу. Это сработало для меня.

.buttonMarkup()

Answer 4

Нашел эту ссылку http://blog.dkferguson.com/index.cfm/2011/3/15/jQuery-Mobile-styling-loaded-content но выглядело это довольно тяжело ...