📜  jQuery Mobile pageinit 事件(1)

📅  最后修改于: 2023-12-03 15:16:42.696000             🧑  作者: Mango

jQuery Mobile pageinit 事件

pageinit 事件是 jQuery Mobile 提供的一种用于处理页面初始化的事件。它在页面被创建后立即触发,并只会触发一次。这个事件适用于处理页面上那些只需要在页面被创建时执行一次的操作。

语法
$(document).on("pageinit", function(event) {
  // 在页面初始化时执行的代码
});
示例
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Pageinit Example</title>
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  </head>
  <body>
    <div data-role="page">
      <div data-role="header">
        <h1>Welcome to my page</h1>
      </div>

      <div data-role="content">
        <ul data-role="listview" id="mylist">
          <li><a href="#">Item 1</a></li>
          <li><a href="#">Item 2</a></li>
          <li><a href="#">Item 3</a></li>
        </ul>
      </div>

      <div data-role="footer">
        <h4>My footer</h4>
      </div>
    </div>

    <script>
      $(document).on("pageinit", function(event) {
        $("#mylist").listview("refresh");
      });
    </script>
  </body>
</html>

在这个例子中,我们使用 pageinit 事件来刷新一个列表视图,保证页面被创建后列表视图能够正确地显示。注意这个例子中我们将 pageinit 事件绑定到了整个文档上,这样无论我们的页面是哪个页面,当它被创建时都会触发 pageinit 事件。

总结

pageinit 事件是 jQuery Mobile 提供的一个方便的工具,用于处理页面初始化的任务。由于它只会在页面被创建时触发一次,因此适合处理那些只需要在页面被创建时执行一次的任务。