使用 JavaScript 访问 jQuery Mobile（子）页面的内容

Question

我一直在尝试许多“标准”JavaScript DOM 函数来访问 HTML 文档中的元素（getElementById、getElementsByName 等），但我无法让它与 jQuery Mobile 一起使用 - 当一个加载子页面后，getElementById("elementOfInterest").innerHTML 返回的值仍包含母版页中的值。

我正在尝试在 iPhone 应用程序中实现这一点，以在导航栏中提取和显示各个子页面的标题（页面显示在 UIWebView 中），但我认为（并希望）问题和解决方案或多或少“独立于平台”。

有人想过如何使用 JavaScript（或者可能是一些 jQuery 函数）来实现这一点吗？不过，我在 jQuery Mobile Docs 中找不到任何内容。

Answer 1

根据 jQuery Mobile configuration 的默认行为，它会在可能的情况下通过 Ajax 自动处理链接点击和表单提交。因此，当您打开新页面（子页面）时，新页面将附加到母版页的 DOM。在此期间，您会丢失在新页面上编写的 JavaScript。

根据我的想法，您可以禁用 Ajax 表单和链接。

为此，请编写如下链接：

<a href="createForm.htm" data-role="button" data-ajax="false">Create</a>

您也可以通过覆盖默认配置对所有链接执行此操作：

<script src="/js/jquerymobile/jquery-1.5.min.js"></script>
<script type="text/javascript">
    $(document).bind("mobileinit", function(){
        $.mobile.ajaxEnabled= false;
    });
</script>
<link rel="stylesheet" href="/css/jquerymobile/jquery.mobile-1.0a3.min.css" />
<script src="/js/jquerymobile/jquery.mobile-1.0a3.min.js"></script>

在这两种方式中，痛苦的是，您将失去框架生成的后退按钮！

阅读更多： http://jquerymobile.com/demos/1.0a3/#page.html&subpageidentifier

编辑：

要在新页面中添加返回按钮，您可以手动输入：

<div data-role="header">
    <a href="../list.htm" data-icon="arrow-l" data-ajax="false">Back</a>
    <h1>
        List items
    </h1>
</div>