动态创建的“ul”项目忽略 Jquery 数据角色选项答案

【问题标题】：Jquery data-role option is ignored for dynamically created "ul" items动态创建的“ul”项目忽略 Jquery 数据角色选项
【发布时间】：2014-03-14 11:52:28
【问题描述】：

我在 JQuery Mobile 中动态创建了“ul”和“li”元素。我已将 data-role="listview" 分配给“ul”元素，但这些项目显示为普通的 html 列表。

我的代码；

<body>
....
<div data-role="content">
<button id="btn" onclick="getList()">Click here</button>
<div id="listDiv"></div>
</div>
<script>
$('#btn').on('click',function(){
$('#listDiv').append('<ul data-role="listview"><li data-role="list-divider">Cars</li><li>BMW</li><li>Audi</li><li data-role="list-divider">Flowers</li><li>Lily</li><li>Rose</li></ul>');
$('ul').listview('refresh');
}
</script>
</body>

【问题讨论】：

当您在 jQuery 中定义点击事件时，内联 getList() 会做什么？
$('ul').listview(); 因为您要附加一个新的ul。
查看演示并解释为什么应该初始化小部件。
是的@Omar。我现在已经检查过了。现在工作正常。
好，我只是想让你知道它为什么起作用以及如何起作用。

标签： jquery html jquery-mobile

【解决方案1】：

当 jQuery Mobile 框架首次初始化时，它增强所有内容/小部件。但是，动态注入的元素应该通过调用Widget增强方法手动初始化/增强。

当你创建一个新的listview时，你需要调用$("#newList).listview()来初始化它。

var newList = '<div data-role="listview" id="new"></ul>';
$("target").append($(newList).listview());

或

$("target").append(newList);
$("#new").listview()

当您将元素 (li) 添加到现有 listview 时，您需要使用$("oldList").listview("refresh");重新增强它。
```
var elements = '<li>Element</li>';
$("listview").append(elements).listview("refresh");
```

Demo

【讨论】：

【解决方案2】：

试试

$('#listDiv').trigger('create');

更新

$('#listDiv ul').listview();

【讨论】：

这可行（修复），但仍然不是 100% 正确的答案。
@Omar 这将完美地工作$('#listDiv ul').listview();。
@Omar 正如您在上面的评论中所说，OP 正在创建一个新的ul 并将其附加到#listDiv。所以需要创建listview。
@Gupta：我已按照您的建议添加了“更新”部分。它工作得很好。谢谢大家的帮助。
@msg 很高兴它帮助了:)

【解决方案3】：

首先使用 Jquery 设置数据。例如

$("#id").data(key , value) // like this.

这不应显示在您的 html 中。

【讨论】：