Javascript Jquery mobile，更改页面的一部分

我试图改变页面的一部分，我知道以前有人问过这个问题，但我真的找不到一个好的解决方案

红色是页面的一部分，我想根据您在左侧面板上单击的内容进行动态更改

图像：

function loadPage(page, title) {
    $.ajax({
        url: page,
        async: false
    }).done(function (data) {
        $("#content").html(data);
        $("#titlepage").html(title);
    }).fail(function () {
        alert("Gick inte att ladda");
    });
}

HTML代码：

function loadPage(page, title) {
    $.ajax({
        url: page,
        async: false
    }).done(function (data) {
        $("#content").html(data);
        $("#titlepage").html(title);
    }).fail(function () {
        alert("Gick inte att ladda");
    });
}

我已经完成了我自己的ajax加载页面，但有没有一种方法可以使用jquery mobile internal，因为它感觉像是一个黑客

结论，有没有更好的方法？我应该如何为每个页面加载脚本，使用主页头一次加载所有页面，或者在加载内容时是否有方法加载脚本

$(function () {
  $("#ExternalPanel").panel();
});

我正在使用 JqueryJquery-2.1.0 JqueryMobilejquery.mobile-1.4.2

致意

我已经完成了我自己的ajax加载页面，但有没有一种方法可以使用jquery mobile internal，因为它感觉像是一个黑客

jquerymobile基于Ajax导航；它使用Ajax检索页面，将它们加载到DOM中，然后在显示它们之前对它们进行初始化。如上所述，当您使用Ajax加载外部数据时，您的做法是正确的

您可以使用

$.ajax（）

、

.load（）

或

$.get（）

。但是，请记住，您需要使用增强方法（例如

.enhanceWithin（）

）手动初始化检索到的数据（如果它包含jQM小部件）

我应该为每个页面加载脚本，使用主页头一次加载所有页面，还是有办法在加载内容时加载脚本

$(function () {
  $("#ExternalPanel").panel();
});

由于您使用的是单页模型，所以更安全的做法是（也许您应该）在

head

中为每个页面加载所有JS库和样式表。尽管如此，jQM只会在第一页初始化时加载这些链接一次，其余的页面将通过Ajax加载/检索。jQM首先加载

数据角色=页面

，它在任何外部页面中找到该页面，并忽略任何其他内容

为什么要加载所有JS和样式表？是为了让jQM重新工作，以防用户刷新当前页面。在这种情况下，当前刷新/重新加载的页面变为第一个页面

绑定事件和添加侦听器： 使用jQM时，需要远离

.ready（）

和/或

$（function（）{}）

并使用。某些情况除外，例如使用外部工具栏、面板或弹出窗口。在加载页面之前，需要在第一次运行时手动初始化这些外部小部件

$(function () {
  $("#ExternalPanel").panel();
});

要添加侦听器，请使用

pagecreate

event

$(document).on("pagecreate", "#pageID", function () {
  $("foo").off("click").on("click", function () {
    /* do something */
  });
});

您需要删除以前的绑定

.off（）

然后再添加它们，因为外部页面在显示时都会通过

pagecreate

。因为jQM一旦隐藏，就会从DOM中删除外部页面

关于将元素附加到活动页面的最后一点。您需要指定要将Ajax检索到的元素添加到哪里

var activePage = $.mobile.pageContainer.pagecontainer("getActivePage");
$.get("URL", function (data) {
    $("#foo", activePage).html(data).enhanceWithin();
}, "html");

（1）

---

（1） 单击“收件箱”

Jquery Code:@Anton在检测时遇到一些问题，但现在已成功获取。您使用的是单页还是多页模式？您使用的是哪个jQM版本？我个人认为您当前的方法没有任何问题，至少在页面内容方面是这样。至于脚本，您可以使用

$.getScript（）

将它们与页面一起加载。然后，您必须考虑一些问题，如“您是想在每次加载页面时加载脚本，还是第一次加载”以及“脚本是否有一段代码在第一次加载时运行。如果是这样，您希望稍后再次运行？”我暂时不理这些问题，只说“是”到当前加载子页的方法。@Omar我现在使用的是单页模型。抱歉，忘了提及jquery的哪个版本。。。我使用jquery.mobile-1.4.2.js和jquery-2.1.0.jsI使它工作了，但是我找不到一个好方法在第二页上用事件执行脚本。当我用$.get（）@CommanderAlchemy加载页面内容时，没有一个jquery移动事件会运行。我忘了提到，如果您有其他页面的自定义JS，您需要将它们放在该页面的

data role=page

div中。嗯，如果我在其他文档上没有页面div，如果我不使用任何事件，脚本就会工作。当我添加一个data role=page的div时，绑定开始起作用。单击面板上的“我的菜单”时，它似乎在执行

（文档）。在（“pagecreate”、“#overview”上，函数（）{

，每次单击都会产生递增效果。我是否需要一个

（文档）。关闭（…）。打开（…）

也是？@CommanderAlchemy如果它是一个外部页面，并且

数据dom缓存

未设置为

true，那么您需要删除以前的绑定或使用
.one（“pagecreate”`而不是
。
谢谢您，我想我已经开始了解这一点了=）由于我正在向内容中注入代码，新页面是否也应该有一个data role=page，是否还需要包含页眉/页脚div角色？我尝试过，但随后它停止呈现内容。删除data role=page的div后，它是否可以与内的增强功能一起工作？