我正在尝试在 listview 上使用 data-filter="true" 功能。我发现它只适用于静态列表（即所有 li 元素都列在 html 文件中）。对于动态生成的列表，它不起作用。似乎它需要以某种方式重新初始化。这是我尝试过的：
<!DOCTYPE html>
<html>
<head>
<title>View Events</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="favicon.ico" />
<link rel="stylesheet"
href="script/jquery.mobile-1.1.0/jquery.mobile-1.1.0.min.css" />
<script type="text/javascript" src="script/jquery-1.7.2.min.js"></script>
<script type="text/javascript"
src="script/jquery.mobile-1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript" src="script/pure_min.js"></script>
</head>
<body>
<div data-role="page" id="view-events">
<div data-role="header" data-id="header" data-position="fixed">
<h3>
View Events of <span id="events-for-pump-id" class="pump-id">...</span>
</h3>
</div>
<div data-role="content">
<ul id="events" data-role="listview" style="display: none;" data-filter="true">
<li class="events code"></li>
</ul>
</div>
<script type="text/javascript">
$(document).on('pageinit', '#view-events', function() {
$('#events-for-pump-id').autoRender({
'pump-id' : 123
});
$('#events').autoRender({
events : [ {
code : 1
}, {
code : 2
}, {
code : 3
} ]
});
$('#events').show();
});
</script>
</div>
</body>
</html>