Question

得到一个奇怪的问题。 这似乎是一个错误。

在Jquery移动列表中动态添加带有嵌套列表的列表项。现在 - 单击“新建列表”项 - 打开“新嵌套列表”，同时显示其先前嵌套的列表项（添加新建之前的最后嵌套列表项）。

这是小提琴 -

http://jsfiddle.net/codenameavi/qSrfv/13/

[使用浏览器返回按钮在小提琴中的嵌套列表和主列表之间导航]

使用此代码动态添加 -

$("#addBttn").click(function() {

      // adding a LI with Nested List in Main List
      var li = '<li data-icon="false" data-theme="a"><a>NEW ITEM</a>'

                 + '<ul data-role="listview" data-inset="true" data-theme="h" data-dividertheme="a">'
                     + '<li data-icon="false" data-theme="b">'
                     + '<a>NEW ITEM 1</a></li>'
                     + '<li data-icon="false" data-theme="b">'
                     + '<a>NEW ITEM 2</a></li>'          
                 + '</ul>'

               + '</li>';

    $("#newsListContent").append(li).trigger('create');
    $("#newsListContent").listview('refresh');
});

修改

是的，这是一个错误。刚报道的问题 - https://github.com/jquery/jquery-mobile/issues/5098

该错误也出现在最新版本中。

Answer 1

试试这个，它有效：
修改

var i=1; $('#addBttn').click(function() { // adding a LI with Nested List in Main List var li = '<li data-icon="false" data-theme="a">NEW '+i+'</li>'; $('#newsListContent').append(li); var ul = '<ul data-role="listview" data-inset="true" data-theme="h" data-dividertheme="a" id="ul_'+i+'">' + '<li data-icon="false" data-theme="b">' + 'NEW ITEM '+i+'</li>' + '<li data-icon="false" data-theme="b">' + 'NEW ITEM '+i+'</li>' + '</ul>'; $('#newsListContent li:last').append(ul).trigger('create'); $('#newsListContent').listview('refresh'); i++; });

http://jsfiddle.net/ouadie/prZ9a/1/

Answer 2

这看起来像是一个错误。

jQM为您的li元素子锚标记添加一个索引号，该标记与具有相同data-url的隐藏页面相关。

正在发生的事情是新的li元素与列表中的最后一个li元素具有相同的编号，这反过来导致两个页面彼此堆叠显示。

这是FOOD元素：

<a href="#list&amp;ui-page=newsListContent-0" class="ui-link-inherit">FOOD</a>

查看href中附加的索引0，这与隐藏页面有关：

<div data-role="page" data-url="list&amp;ui-page=newsListContent-0" data-theme="d" data-count-theme="c" tabindex="0" class="ui-page ui-body-d">
    <div data-role="header" data-theme="b" class="ui-header ui-bar-b"
        role="banner">
        <div class="ui-title">FOOD</div>
    </div>
    <div data-role="content" class="ui-content" role="main">
        <ul data-role="listview" data-inset="true" data-theme="d"
            data-dividertheme="a"
            class="ui-listview ui-listview-inset ui-corner-all ui-shadow">
            <li data-icon="false" data-theme="a"
                class="ui-li ui-li-static ui-body-a ui-corner-top">FOOD ITEM 1</li>
            <li data-icon="false" data-theme="a"
                class="ui-li ui-li-static ui-body-a">FOOD ITEM 2</li>
            <li data-icon="false" data-theme="a"
                class="ui-li ui-li-static ui-body-a ui-corner-bottom">FOOD
                ITEM 3</li>
        </ul>
    </div>
</div>

具有相同的索引0.添加新的li元素不会更改当前的li索引并重复已使用的0索引。

这是New li元素（href也指向食物li元素）

<a class="ui-link ui-link-inherit" href="#list&amp;ui-page=newsListContent-0">NEW ITEM</a>

这是新的隐藏页面：

<div data-role="page" data-url="list&amp;ui-page=newsListContent-0" data-theme="h" data-count-theme="c" tabindex="0" class="ui-page ui-body-h">
    <div data-role="header" data-theme="b" class="ui-header ui-bar-b"
        role="banner">
        <div class="ui-title">NEW ITEM</div>
    </div>
    <div data-role="content" class="ui-content" role="main">
        <ul data-role="listview" data-inset="true" data-theme="h"
            data-dividertheme="a"
            class="ui-listview ui-listview-inset ui-corner-all ui-shadow">
            <li data-icon="false" data-theme="b"
                class="ui-btn ui-btn-up-b ui-btn-icon-right ui-li ui-corner-top"><div
                    class="ui-btn-inner ui-li ui-corner-top">
                    <div class="ui-btn-text">
                        <a class="ui-link-inherit">NEW ITEM 1</a>
                    </div>
                </div></li>
            <li data-icon="false" data-theme="b"
                class="ui-btn ui-btn-up-b ui-btn-icon-right ui-li ui-corner-bottom"><div
                    class="ui-btn-inner ui-li">
                    <div class="ui-btn-text">
                        <a class="ui-link-inherit">NEW ITEM 2</a>
                    </div>
                </div></li>
        </ul>
    </div>
</div>

即使您更新到最新版本，它仍然是一个问题：

http://jsfiddle.net/qSrfv/16/

我用jQM创建了一个新问题：

https://github.com/jquery/jquery-mobile/issues/5098

以前看起来这是一个问题，但由于你动态添加了li元素，我创建了一个新问题

Jquery Mobile：动态添加列表，嵌套项目无法正确打开内部列表

2 个答案: