6

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

我从一个空列表开始：

<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 处理，但是我看不到在创建列表项时以编程方式设置子页面链接以确保链接唯一的方法。

4

1 回答 1

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>

希望有帮助。

于 2013-02-07T13:58:10.480 回答