javascript - 内联 Javascript 块未初始化

Question

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

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

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

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

但是，如果我添加

data-ajax="false"

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

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

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

score 1 · Accepted Answer

如果您使用默认的 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 加载，您可以将脚本块放在“页面”内<div>

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

score 1 · Accepted Answer

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

这是 jQuery Mobile 文档的一部分：

请务必注意，如果您从通过 Ajax 加载的移动页面链接到包含多个内部页面的页面，则需要在链接中添加 rel="external" 或 data-ajax="false"。这告诉框架重新加载整个页面以清除 URL 中的 Ajax 哈希。

现在，如果您想增强新页面内容，请使用以下命令：

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

或者如果您还对页眉和页脚进行了更改，请使用：

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

如果您想要更好地轻描淡写，请查看我的博客文章，我是否正在详细讨论页面内容标记增强。在那里你会找到上面提到的函数的例子。它也可以在这里找到。

score 0 · Accepted Answer

尝试将您的内联 JS 代码封装成如下内容：

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

3 回答 3