Question

Getting a strange issue. It seems to be a bug.

Am adding List items with Nested list, dynamically in a Jquery mobile List.
Now- clicking on the New List item- opens the New Nested List, but also its showing- previous nested list item (the Last Nested List item before adding the New).

Here is the Fiddle-

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

[Use the Browser Back button to navigate between Nested and Main List in the fiddle]

Adding dynamically with this code-

$("#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');
});

EDIT

Yes its a bug. Issue just reported- https://github.com/jquery/jquery-mobile/issues/5098

The bug is there in latest version too.

Answer 1

Try this, it works :
EDIT:

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/