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库重建页面,但对于我的生活,我一般都找不到任何可以做到的事情.我已经设法找到几个关于这是选择框和列表的问题的帖子,但一般,网格或按钮没有任何内容.到目前为止这是否可能？它仍处于alpha状态,所以可能不是.

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

希望对你也有帮助.