Question

在jQuery页面上，我有一个登录表单。代码很简单：

<form method="post">
    <div data-role="fieldcontain">
        .... Form here
    </div>
</form>

但提交了以下表单，JQM通过Ajax POST加载下一页。

问题是该新页面上的任何内联Javasctipt都未初始化。我不是在谈论$（文档）元素等。整个内联的Javascript块没有初始化。

但是，如果我添加

data-ajax="false"

到表格标签，一切都很好。页面已加载并正确初始化。

为什么会发生这种情况，是否有办法使用加载了ajax的内容触发页面初始化？

我在Firefox和Android Webview客户端都观察到了这一点。

Answer 1

如果使用默认的jQuery Mobile实现（使用ajax）加载页面，则只会加载第一页（<div data-role="page">）上的脚本块。

您可以通过mobileinit关闭ajax加载，这将全局禁用ajax加载，或者您可以通过源链接禁用它。

$(document).on("mobileinit", function(){
    $.mobile.ajaxEnabled = false;
});

或

<a data-role="button" data-ajax="false"
    href="myPageWithItsOwnScriptBlock.html">Link</a>

如果您想继续使用ajax加载，可以将脚本块放在“page”中<div>

<div data-role="page">
    <script src="myscript.js"></script>
    <div data-role="header">
    ....

Answer 2

原因 data-ajax="false" 在您的情况下工作是因为它会强制重新加载整页，这会偶然触发页面标记增强。

这是来自jQuery Mobile文档的一段：

重要的是要注意您是否通过移动页面进行链接通过Ajax加载到包含多个内部页面的页面，您需要在链接中添加rel =“external”或data-ajax =“false”。这个告诉框架进行整页重新加载以清除Ajax 网址中的哈希值。

现在，如果您想要增强新的网页内容，请使用以下内容：

$('#pageID').trigger('create');

如果您还对页眉和页脚进行了更改，请使用此选项：

$('#pageID').trigger('pagecreate');

如果您想要更好地轻描淡写，请查看我的博客 ARTICLE ，我是否正在谈论页面内容标记增强的详细信息。在那里你会找到顶部提到的功能的例子。它也可以找到 HERE 。

Answer 3

尝试将内联JS代码封装成以下内容：

$(document).bind('pageinit', function(event) {
    // your inline code goes here
});