Question

我有一个动态创建的列表。内容看起来不错，但每个链接指向同一页面链接：

我从一个空列表开始：

<div data-role="content" class="ui-content" role="main">
    <ul data-role="listview" data-theme="b" data-inset="true" id="profile2" class="ui-listview ui-listview-inset ui-corner-all ui-shadow">
    </ul>        
</div>

我使用$('#profile2').append构建列表，并在插入每个新链接后使用$('#profile2').listview("refresh");刷新列表。

以下是生成列表后的代码示例：

<div data-role="content" class="ui-content" role="main">
    <ul data-role="listview" data-theme="b" data-inset="true" id="profile2" class="ui-listview ui-listview-inset ui-corner-all ui-shadow">
        <li><div class="ui-btn-inner ui-li">
            <div class="ui-btn-text"><a href="#/demo?a=53&amp;b=-7&amp;ui-page=profile2-0" class="ui-link-inherit">
                <h3 class="ui-li-heading">Headin1</h3>
                <p class="ui-li-desc">Content 1</p></a><
            </div>
            <span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span></div>
        </li>
        <li><div class="ui-btn-inner ui-li">
            <div class="ui-btn-text"><a href="#/demo?a=53&amp;b=-7&amp;ui-page=profile2-0" class="ui-link-inherit">
                <h3 class="ui-li-heading">Headin2</h3>
                <p class="ui-li-desc">Content 2</p></a><
            </div>
            <span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span></div>
        </li>
    </ul>        
</div>

注意两个链接的href都是指profile2-0

有趣的是，为子链接生成的页面具有相同的tabindex（0），以及相同的data-url。这是两个页面的代码：

<div data-role="page" data-url="/demo?a=53&amp;b=-7&amp;ui-page=profile2-0" tabindex="0" class="ui-page ui-body-a">
   CONTENT.....
</div>

我使用listview("refresh")来刷新样式，是否还要确保页面项目具有唯一标记？

当然，这应该由JQM处理，但是在创建列表项时我看不到以编程方式设置子页面链接的方法，以确保链接是唯一的。

Answer 1

正如Taifun已经指出的那样，你可能在生成列表项的代码中遇到了问题（你没有提供）。

我尝试了这段代码，并没有遇到任何问题：

<script>
        $(document).on("pageshow", function(){
            for(i=0; i<10; i++) {
                $("#profile2").append('<li><a href="/test/' + i + '">test ' + i + '</a></li>');
            }
            $("#profile2").listview('refresh');
        });
    </script>

希望有所帮助。

Jquery Mobile - 使用相同href的嵌套列表项

1 个答案: