如何通过 jquery 向 <li> 添加 2 个按钮答案

【问题标题】：How to add 2 buttons to <li> via jquery如何通过 jquery 向 <li> 添加 2 个按钮
【发布时间】：2013-06-17 11:21:34
【问题描述】：

我使用http://jsfiddle.net/eLENj/493/ 作为指导线，在一个 li 元素中创建 2 个堆叠按钮。

这是我正在使用的代码

            '<li><div class="ui-grid-a">' +
                '<div class="ui-block-a" style="width: 75%;">' +
                    '<div data-role="fieldcontain">' +
                        '<h3>Address Details:</h3>' +
                            '<p>Address 1</p>' +
                    '</div>' +
                '</div>' +
                '<div class="ui-block-b" style="width: 25%; float: right;">' +
                    '<div data-role="controlgroup" data-type="horizontal" style="height: 20px;">' +
                        '<a href="index.html" data-role="button" data-icon="map">Map</a>' +
                        '<a href="index.html" data-role="button" data-icon="delete">Delete</a>' +
                    '</div>' + 
                '</div>' +   
            '</div>' +
            '</li>').listview('refresh');

但我最终得到的是两个看起来像“MapDelete”的“常规”超链接。任何想法为什么按钮没有正确呈现？

【问题讨论】：

有query.mobile-1.0.1.min.css的引用吗？

标签： javascript jquery-mobile jquery-mobile-listview jquery-mobile-button

【解决方案1】：

方法 listview('refresh') 只会设置列表视图的样式。

因为按钮不是列表视图的一部分，所以它们将被忽略。

您需要像这样单独设置它们的样式：

$('[data-role="button"]').button();

或者您可以在内容 DIV 上使用此方法：

$('#contentDivID').trigger('create');

如果您想了解有关此主题的更多信息，请查看我的另一篇博客 ARTICLE，其中介绍了如何增强动态添加的 jQuery Mobile 内容。

编辑：

工作示例：http://jsfiddle.net/Gajotres/UDBCM/

您需要自己定位它们 + 找到一些自定义地图图标。

【讨论】：