Jquery Mobile - nested list items using same href

Question

I have a list I am creating dynamically. The content looks good BUT each link points to the same page link:

I start with an empty list:

<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>

I use $('#profile2').append to build the list and use $('#profile2').listview("refresh"); to refresh the list after each new link is inserted.

Here is a sample of code after the list has been generated:

<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>

NOTE the href for both links refers to profile2-0

Interestingly, the pages generated for the child links have the same tabindex (0), as well as the same data-url. This is the code for both pages:

<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>

I use listview("refresh") to refresh the styling, should this also take care of ensuring the page items are uniquely labeled?

Of course, this should be taken care of by JQM, but I cannot see a way to programmatically set a sub page link when creating the list item to ensure the links are unique.

Answer 1

As it has already been pointed out by Taifun, you probably have a problem in the code generating the list items (that you did not provide).

I tried this code, and did not face any issue:

<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>

Hope that helps.