JQuery Mobile 不刷新按钮样式

发布于 2024-10-14 22:23:32 字数 647 浏览 4 评论 0原文

当我尝试使用如下代码在 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 阶段，所以可能不是。

原文

When I try to make 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');

The elements are added properly, but the JQuery Mobile stylings are not performed. This sort of makes sense, I know that the library does a few things to the DOM as soon as it loads, but I can't figure out a way to make this happen on command. Obviously I need to instruct the JQuery Mobile library to rebuild the page, but for the life of me, I can't find anything to do this in general. I have managed to find several posts about this being a problem with select boxes and lists, but there is nothing for the page in general, grids, or buttons. Is this even possible as of now? Its still in alpha, so it may not be.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

煮酒 2024-10-21 22:23:32

您可以这样做，而不是刷新整个 div 页面：

如果您尝试刷新 data-role=collapsible，请使用 collapsible() 函数
如果您尝试刷新 data-role=button，请使用 button() 函数

示例：

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

Instead of refreshing the whole div page you can do this:

if you are trying to refresh data-role=collapsible use the collapsible() function
if you are trying to refresh data-role=button use the button() function

Examples:

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

回复收藏 0 原文

瑾夏年华 2024-10-21 22:23:32

这是在我的情况下有效的方法：

我有一个包含不同元素的列表视图，每个元素都有一个 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

希望对您也有帮助。

Here is what worked in my case:

I hava a listview with different elements, each of it has a data-role="controlgroup" with split-buttons in it:

<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>

After I've added another list element (including new split buttons) dynamically with javascript, I need to refresh the list, the controlgroup and the buttons like this:

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

Hope that helps you too.

回复收藏 0 原文