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

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>

希望有帮助。