Jquery Mobile:动态添加嵌套项的列表未正确打开内部列表
遇到一个奇怪的问题这似乎是一个bug。 在Jquery移动列表中动态添加带有嵌套列表的列表项。 现在-单击新列表项-打开新的嵌套列表，但也会显示上一个嵌套列表项（添加新列表项之前的最后一个嵌套列表项） 这是小提琴- [使用浏览器后退按钮在小提琴中的嵌套列表和主列表之间导航] 使用此代码动态添加-Jquery Mobile:动态添加嵌套项的列表未正确打开内部列表,jquery,list,jquery-mobile,Jquery,List,Jquery Mobile,遇到一个奇怪的问题这似乎是一个bug。 在Jquery移动列表中动态添加带有嵌套列表的列表项。 现在-单击新列表项-打开新的嵌套列表，但也会显示上一个嵌套列表项（添加新列表项之前的最后一个嵌套列表项） 这是小提琴- [使用浏览器后退按钮在小提琴中的嵌套列表和主列表之间导航] 使用此代码动态添加- $("#addBttn").click(function() { // adding a LI with Nested List in Main List var li =
$("#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');
});
$（“#addBttn”）。单击（函数（）{
//在主列表中添加具有嵌套列表的LI
var li='
最新版本中也存在该漏洞。试试这个，它可以工作：
编辑：
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++;
});
var i=1；
$（'#addBttn'）。单击（函数（）{
//在主列表中添加具有嵌套列表的LI
var li='新'+i+' '；
$（'newsListContent'）。追加（li）；
var ul=''
+“- ”
+“新项目”+i+“
”
+“- ”
+“新项目”+i+“
”
+“
”；
$（'#newsListContent li:last'）.append（ul.trigger（'create'）；
$（'newsListContent'）。列表视图（'refresh'）；
i++；
});
这看起来是个bug
jQM将索引号添加到与具有相同数据url的隐藏页面相关的li元素子锚定标记中
所发生的情况是，新的li元素与列表中的最后一个li元素具有相同的编号，这反过来会导致两个页面彼此堆叠显示
这是食物元素：
<a href="#list&ui-page=newsListContent-0" class="ui-link-inherit">FOOD</a>
请参阅href中附加的索引0，这与隐藏页面相关：
<div data-role="page" data-url="list&ui-page=newsListContent-0" data-theme="d" data-count-theme="c" tabindex="0" class="ui-page ui-body-d">
<div data-role="header" data-theme="b" class="ui-header ui-bar-b"
role="banner">
<div class="ui-title">FOOD</div>
</div>
<div data-role="content" class="ui-content" role="main">
<ul data-role="listview" data-inset="true" data-theme="d"
data-dividertheme="a"
class="ui-listview ui-listview-inset ui-corner-all ui-shadow">
<li data-icon="false" data-theme="a"
class="ui-li ui-li-static ui-body-a ui-corner-top">FOOD ITEM 1</li>
<li data-icon="false" data-theme="a"
class="ui-li ui-li-static ui-body-a">FOOD ITEM 2</li>
<li data-icon="false" data-theme="a"
class="ui-li ui-li-static ui-body-a ui-corner-bottom">FOOD
ITEM 3</li>
</ul>
</div>
</div>
<div data-role="page" data-url="list&ui-page=newsListContent-0" data-theme="h" data-count-theme="c" tabindex="0" class="ui-page ui-body-h">
<div data-role="header" data-theme="b" class="ui-header ui-bar-b"
role="banner">
<div class="ui-title">NEW ITEM</div>
</div>
<div data-role="content" class="ui-content" role="main">
<ul data-role="listview" data-inset="true" data-theme="h"
data-dividertheme="a"
class="ui-listview ui-listview-inset ui-corner-all ui-shadow">
<li data-icon="false" data-theme="b"
class="ui-btn ui-btn-up-b ui-btn-icon-right ui-li ui-corner-top"><div
class="ui-btn-inner ui-li ui-corner-top">
<div class="ui-btn-text">
<a class="ui-link-inherit">NEW ITEM 1</a>
</div>
</div></li>
<li data-icon="false" data-theme="b"
class="ui-btn ui-btn-up-b ui-btn-icon-right ui-li ui-corner-bottom"><div
class="ui-btn-inner ui-li">
<div class="ui-btn-text">
<a class="ui-link-inherit">NEW ITEM 2</a>
</div>
</div></li>
</ul>
</div>
</div>
食物
- 食品1
- 食品项目2
- 食品
项目3
使用相同的索引0。添加新的li元素不会更改当前的li索引，而是复制已使用的0索引
这是新的li元素（href也指向食物li元素）
以下是新的隐藏页面：
<div data-role="page" data-url="list&ui-page=newsListContent-0" data-theme="d" data-count-theme="c" tabindex="0" class="ui-page ui-body-d">
<div data-role="header" data-theme="b" class="ui-header ui-bar-b"
role="banner">
<div class="ui-title">FOOD</div>
</div>
<div data-role="content" class="ui-content" role="main">
<ul data-role="listview" data-inset="true" data-theme="d"
data-dividertheme="a"
class="ui-listview ui-listview-inset ui-corner-all ui-shadow">
<li data-icon="false" data-theme="a"
class="ui-li ui-li-static ui-body-a ui-corner-top">FOOD ITEM 1</li>
<li data-icon="false" data-theme="a"
class="ui-li ui-li-static ui-body-a">FOOD ITEM 2</li>
<li data-icon="false" data-theme="a"
class="ui-li ui-li-static ui-body-a ui-corner-bottom">FOOD
ITEM 3</li>
</ul>
</div>
</div>
<div data-role="page" data-url="list&ui-page=newsListContent-0" data-theme="h" data-count-theme="c" tabindex="0" class="ui-page ui-body-h">
<div data-role="header" data-theme="b" class="ui-header ui-bar-b"
role="banner">
<div class="ui-title">NEW ITEM</div>
</div>
<div data-role="content" class="ui-content" role="main">
<ul data-role="listview" data-inset="true" data-theme="h"
data-dividertheme="a"
class="ui-listview ui-listview-inset ui-corner-all ui-shadow">
<li data-icon="false" data-theme="b"
class="ui-btn ui-btn-up-b ui-btn-icon-right ui-li ui-corner-top"><div
class="ui-btn-inner ui-li ui-corner-top">
<div class="ui-btn-text">
<a class="ui-link-inherit">NEW ITEM 1</a>
</div>
</div></li>
<li data-icon="false" data-theme="b"
class="ui-btn ui-btn-up-b ui-btn-icon-right ui-li ui-corner-bottom"><div
class="ui-btn-inner ui-li">
<div class="ui-btn-text">
<a class="ui-link-inherit">NEW ITEM 2</a>
</div>
</div></li>
</ul>
</div>
</div>
新项目
-
我用jQM创建了一个新问题：
看起来这以前是一个问题，但由于您正在动态添加li元素，我创建了一个新问题您好，谢谢您的回复。我尝试了您的代码。但是，动态添加多个项目，在嵌套页面中创建问题。请看一看-您应该提供不同的id，我添加了id=“ul_'+I+”
，查看我的解决方案，我认为最好删除所有的
，并为前三项提供不同的ID。否。此解决方案不能解决此问题-。添加多个listItem并检查-新的嵌套列表相互冲突。为什么不在那里拨弄并测试代码！请参见此处：它可以工作！不会与新的ne冲突sted列表。感谢您报告最新版本的错误和测试。因此，我绕过了这个问题，对每个主列表项单击进行了检查-它将列表文本与嵌套列表页面标题匹配，将ui页面仅与该页面一起添加活动。很快将添加有关该过程的简短回答。