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

希望对你也有帮助。

Answer 3

如果您尝试刷新控制组，我想补充一下。这对我有用。

.buttonMarkup()