Jquery移动: dynamically added list with nested item not opening inner list properly

Question

遇到一个奇怪的问题。 这似乎是一个错误。

正在 Jquery 移动列表中动态添加带有嵌套列表的列表项。 现在 - 单击“新列表”项 - 打开“新嵌套列表”，同时也显示其上一个嵌套列表项(添加新列表项之前的最后一个嵌套列表项)。

这是 fiddle -

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

[使用浏览器后退按钮在 fiddle 中的嵌套列表和主列表之间导航]

使用此代码动态添加-

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

编辑

是的，这是一个错误。刚刚报告的问题 - https://github.com/jquery/jquery-mobile/issues/5098

最新版本也存在该错误。

Answer 1

试试这个，它有效:
编辑:

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/