如何使jquery搜索与动态列表视图一起使用?

时间:2012-07-10 13:01:08

标签: jquery mobile

我正在尝试使用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>

1 个答案:

答案 0 :(得分:0)

我在偶然的谷歌搜索http://www.elijahmanor.com/2011/02/dynamically-appending-elements-to.html上找到了这个,你检查了吗?