jQuery Mobile 1.3.0 - 对话框窗口不会在通过 AJAX 加载页面时打开答案

【问题标题】：jQuery Mobile 1.3.0 - Dialog windows don't open on page load via AJAXjQuery Mobile 1.3.0 - 对话框窗口不会在通过 AJAX 加载页面时打开
【发布时间】：2013-04-04 18:32:30
【问题描述】：

在 jQuery mobile 中通过 AJAX 从链接加载页面时，对话框窗口在您刷新页面之前不会触发。如果我尝试将对话框添加到任何其他页面，就会发生这种情况。如果我要在对话框页面所在页面的链接中添加 data-ajax="false"，那么对话框就可以正常工作。我们想使用 jQuery 移动功能和转换，所以 ajax false 是不可能的。

每个页面上的所有标题信息都是相同的，并且所有对话框都被正确调用。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Mobile Demos</title>
    <link rel="stylesheet" href="css/jquery.mobile-1.3.0.css">
    <script src="js/jquery.js"></script>
    <script src="js/jquery.mobile-1.3.0.js"></script>
</head>
<div data-role="page" data-theme="a" id="dialogpage">
    <a href="#foo2" data-rel="dialog" data-role="button" data-inline="true" data-theme="c">Open Basic Dialog</a>
</div>
<div data-role="dialog" id="foo2" data-close-btn="right">
    <div data-role="header" data-theme="d">
        <h1>lorum ipsum header</h1>
    </div>
    <div data-role="content">
        <p>lorum ipsum</p>
        <a href="#" data-rel="back" data-role="button" data-inline="true" data-theme="b">Ok, I get it</a>
    </div>
</div>
</body>
</html>

【问题讨论】：

可以，你提供你试图“触发”对话框的javascript吗？
这是 jQuery Mobile，对话框由框架创建。

标签： jquery html css ajax mobile

【解决方案1】：

尝试在文档底部加载 JavaScript。

就在</body> 标记上方。这是优化加载时间和其他原因的最佳实践方法。例如在某些浏览器的某些情况下（可能在撰写本文时最多。JavaScript 通常只能在加载之前找到加载的内容。如果您的脚本在您要显示的元素之前加载，则 JavaScript 正在运行在元素本身被渲染之前它的“就绪”功能。由于缓存，它可能会在刷新时触发。但在其余时间都失败了，因为脚本找不到它

【讨论】：

jQuery Mobile 特别需要头部脚本。
仍然没有消除您的脚本已加载并尝试在其余 UI 呈现之前运行的事实。我使用过 jQuery Mobile，我会告诉你他们希望你拥有它的事实。就静态库和插件文件而言，但是如果您希望在 dom 加载完成时运行某些东西，您需要将它放在 dom 的底部，这样它就不会过早运行。仅仅因为 jQuery Mobile 说它想要在顶部并不意味着你的其余脚本需要（或应该）