【问题标题】:jQuery Mobile, buttons don't render properly in dynamic list [duplicate]jQuery Mobile,按钮在动态列表中无法正确呈现 [重复]
【发布时间】:2012-07-04 14:54:34
【问题描述】:

可能重复:
Refresh a section after adding HTML dynamically to 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 here)。我错过了什么?

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");

【问题讨论】:

  • 您缺少刷新方法,它用于将 jqm 样式应用于动态添加的元素。看这个:stackoverflow.com/questions/7160549/jquery-mobile-refresh-list 和这个:stackoverflow.com/questions/4821293/… 可能还有更多......
  • @Th0rndike - 我确实刷新了我的列表。您可以在我的代码底部看到$("#list").listview("refresh") 语句。
  • 我看他们很好,唯一的问题是按钮自己堆叠。如果这是问题所在,您可以使用 css 解决它。小提琴:jsfiddle.net/fuWzX/5
  • 这行得通,但我有两个问题:为什么当我动态地创建页面而不是使用静态 HTML 时会发生这种情况?如果我不希望 .ui-block-b 类中的每个地址都有该边距怎么办?

标签: jquery listview button jquery-mobile


【解决方案1】:

替换:

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

与:

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

【讨论】:

  • fiddle :这种方式很简单。但是,按钮之间的线条和边距在此正确呈现。
  • 就是这个。但为什么会这样呢?
  • 我也想知道...
  • 我已经认识到这个问题是由于渲染中的错误造成的。当多个元素水平排列时,经常会遇到此类错误。例如,在安排浮动的
  • 进行导航时。如果您没有在
  • 之间设置换行符,它们可能无法正确呈现。所以,当我访问你的jsfiddle 时,我认为这个问题是由于这个错误造成的。
【解决方案2】:

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

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

小提琴:

fiddle

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

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

【讨论】:

    【解决方案3】:

    从链接中删除 data-role=button 属性。当你拥有它时,你正试图初始化两个相互重叠的小部件,这会产生冲突。

    【讨论】:

    • 那行不通。这创建了三个分离的圆形按钮,而不是我想要的三个水平堆叠的按钮,并且按钮仍然未正确呈现(=它们部分重叠)
    • 制作一个 jsfiddle 来演示,以便我们看到确切的问题。
    • 这里是:jsfiddle.net/fuWzX
    猜你喜欢
    相关资源
    最近更新 更多
    热门标签