jQuery 动态点击后使用JavaScript创建jQuery Mobile页面

在本文中，我们将介绍如何使用jQuery和JavaScript在点击后通过动态创建来创建jQuery Mobile页面。

什么是jQuery Mobile？

jQuery Mobile是一个基于HTML和JavaScript的开源移动端UI框架。它提供了一套可移植的UI组件和功能，可以用来构建高度可定制的移动端应用程序。通过使用jQuery Mobile，开发者可以快速而简便地创建现代化和在各种移动设备上运行良好的移动应用。

动态创建jQuery Mobile页面

为了动态创建jQuery Mobile页面，我们需要使用以下步骤：

步骤1：引入jQuery和jQuery Mobile库

首先，我们需要在HTML文件中引入jQuery和jQuery Mobile库，这样我们才能使用它们的功能来创建和渲染页面。可以通过从官方网站下载并将库文件引入到HTML文件中来实现。

<script src="jquery.min.js"></script>
<script src="jquery.mobile.min.js"></script>

步骤2：创建一个按钮

接下来，我们需要在HTML文件中创建一个按钮，用于触发创建新页面的操作。可以使用以下代码来创建一个简单的按钮：

<button id="createPageBtn">创建新页面</button>

步骤3：动态创建页面

现在，我们将使用JavaScript代码在单击按钮后动态创建一个新的jQuery Mobile页面。可以使用以下代码来实现：

$(document).ready(function(){
  $("#createPageBtn").click(function(){
    // 创建一个新的页面，并设置页面的属性和内容
    var newPage = $("<div data-role='page' id='newPage'></div>");
    newPage.append("<div data-role='header'><h1>新页面</h1></div>");
    newPage.append("<div data-role='content'><p>这是一个新页面。</p></div>");

    // 将新页面添加到文档中
    $("body").append(newPage);

    // 渲染新页面
    newPage.page();

    // 跳转到新页面
    $.mobile.changePage(newPage);
  });
});

在上面的代码中，我们首先使用$()函数选择按钮元素，并使用click()函数将一个事件处理程序附加到按钮的点击事件上。在事件处理程序中，我们创建一个新的页面元素并设置其属性和内容。然后，我们将新页面添加到文档中，并使用page()函数渲染它。最后，我们使用changePage()函数将页面导航到新页面。