0

可能重复：
将 HTML 动态添加到 jquery mobile 后刷新部分

我正在尝试在我的 jQueryMobile 页面中插入一个动态列表。

在我的主页中，我有一个名为“list”的 HTML ul 元素：<ul id='list' data-role='listview'> </ul>

每个列表元素都包含一个网格 ( class="ui-grid-a")。网格中的第一个 div，每个元素 ( div class="ui-block-a") 包含一个 h2 描述，而第二个包含三个水平排列的按钮，在一个控件组 ( div class="ui-block-b" data-role="controlgroup" data-type="horizontal") 中。

虽然当元素在静态页面中时按钮呈现完美，但如果我尝试将它们动态地插入页面中，它们会呈现不正确。下面是我的代码（此处为 jsfiddle ）。我错过了什么？

DOMElement += '<li>';
        for (i = 0 ; i < length ; i++) {
            if (typeof systemArray[i] !== 'undefined') {
                DOMElement += '<fieldset class="ui-grid-a"> <div class="ui-block-a" style="width:60%;"> <h2 id="'
                DOMElement += "system" + systemArray[i].name;
                DOMElement += '">';
                DOMElement += systemArray[i].name;
                DOMElement += '</h2>';
                DOMElement += '</div>';
                DOMElement += '<div class="ui-block-b" data-role="controlgroup" data-type="horizontal" style="width:30%;">';
                DOMElement += '<a href="#" class="deletebutton" data-icon="delete" data-role="button" id="';
                DOMElement += 'delete|' + systemArray[i].name;
                DOMElement += '" data-iconpos="notext">Cancel</a>';
                DOMElement += '<a href="#" class="modifybutton" data-icon="gear" data-role="button" id="';
                DOMElement += 'modify|' + systemArray[i].name;
                DOMElement += '" data-iconpos="notext">Modify</a>';
                DOMElement += '<a href="#" class="connectbutton" data-icon="arrow-r" data-role="button" id="';
                DOMElement += 'connect|' + systemArray[i].name;
                DOMElement += '" data-iconpos="notext">Connect</a>';
                DOMElement += '</div>'
                DOMElement += '</fieldset>';
            }   

        }
        DOMElement += '</li>';

        // Needs trigger ('create') to create the icons http://jquerymobiledictionary.pl/faq.html
        $("#list").html(DOMElement).trigger('create');
        $("#list").listview("refresh");
4

3 回答 3

1

检查你的小提琴我发现问题是控制组中的按钮自己堆叠。您可以使用 css 解决此问题：

.ui-block-b a{
    margin-left:6px !important;
}

小提琴：

小提琴

我不知道jqm为什么会这样做，开发时经常发生，有时会在标题上列出堆栈15px。然而，css 解决方法并不难做到并且工作正常。如果您不希望每个 ui-block-b 都有那个边距，您可以轻松地为您的按钮添加一个额外的类，并将 css 添加到它。

IMO 处理此问题的最佳方法是创建一个包含所有 jqm 怪癖的单独且特定的 css 样式表，这样您就可以轻松地处理和可视化它们。

于 2012-07-04T15:40:00.873 回答
1

代替：

DOMElement += '" data-iconpos="notext">.....</a>';

和：

DOMElement += '" data-iconpos="notext">.....</a>\n';
于 2012-07-04T16:09:16.610 回答
0

Remove the data-role=button attribute from the links. When you have it, you are trying to initialize two widgets on top of each other which is creating a conflict.

于 2012-07-04T14:58:36.423 回答