0

jQuery Mobile 和加载额外的脚本让我很生气。我已经查看了他们的文档，并且我了解他们的 AJAX 模型会导致一些复杂性，我已经从这里获得了一些帮助来应用信息，但我仍然无法让所有东西都能始终如一地工作。这是一个例子：

我有一个包含 2 个表单字段的页面，一个用于日期，一个用于时间。我在日期字段上调用 ​​jQuery UI Datepicker，在时间字段上调用第 3 方 Timepicker（这个 timepicker）。如果我直接访问该页面或进行刷新，两者都运行得很好。但是，如果我从其他地方导航到该页面，则只有 datepicker 运行。它们都链接在我的文档头中，并且都在页面上调用pageinit。为什么一个有效而另一个无效？

头：

<!DOCTYPE html>
<!--[if IE 8]>               <html class="no-js lt-ie9" lang="en" > <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en" > <!--<![endif]-->
  <head>
    <meta charset="utf-8">

    <title>Test Site</title>

    <!-- Make it Mobile friendly -->
    <meta name="HandheldFriendly" content="True">
    <meta name="MobileOptimized" content="320">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="cleartype" content="on">

    <!-- Stylesheets -->
    <link rel="stylesheet" href="_css/normalize.css" />
    <link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet">
    <link rel="stylesheet" href="_css/jquery.mobile.structure-1.3.1.css" />
    <link rel="stylesheet" href="_css/red_variant/red_variant.css" />
    <link href="_libraries/jquery-ui-timepicker-0.3.2/jquery.ui.timepicker.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="_css/foundation.css" />
    <link rel="stylesheet" href="_css/main.css" />

    <!-- jQuery Including UI and Mobile -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js" type="text/javascript"></script>
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js" type="text/javascript"></script>
    <script src="_libraries/jquery-ui-timepicker-0.3.2/jquery.ui.timepicker.js" type="text/javascript"></script>

</head>

有问题的表格：

<form>
    <label for="addAgendaDate" class="ui-hidden-accessible">Date:</label>
<input name="addAgendaDate" id="addAgendaDate" placeholder="Date" value="" type="text">
    <label for="addAgendaTime" class="ui-hidden-accessible">Time:</label>
<input name="addAgendaTime" id="addAgendaTime" placeholder="Time" value="" type="text">
</form>

<script>
        $(document).on('pageinit', function(){       
            $( "#addAgendaTime" ).timepicker({
                showPeriod: true,
                showLeadingZero: true
            });
        });

        $(document).on('pageinit', function(){       
            $( "#addAgendaDate" ).datepicker();
        });
</script>

我错过了什么导致两者都可以在正常页面加载上工作但只有一个可以在 jQuery Mobile AJAX 加载上工作？

解决！ 花了一个月的时间，但我终于解决了这个问题。Gajotres 和 Kevin B 帮助我了解了底层脚本使用问题，但我的每个脚本问题最终都有不同的附加问题：

  • 下面的日期和时间选择器不一致实际上是由于 z-index 的 CSS 问题。时间选择器正在弹出并且在脚本方面运行良好，但由于某种原因，jQueryUI 将其 z-index inline 设置为零，这将其置于移动页面覆盖层之后。CSS覆盖（必须做一个！重要）修复了这个问题。
  • jQuery Countdown 出现问题，这是一个 ID 重复问题，因为我有一个 PHP，包括将相同的页脚拉入每个页面。改成类来解决。
4

1 回答 1

5

jQuery Mobile 如何处理页面更改

要了解这种情况，您需要了解 jQuery Mobile 的工作原理。它使用 ajax 来加载其他页面。

第一页正常加载。它的HEAD和BODY被加载到DOM中，它们在那里等待其他内容。当第二个页面被加载时，只有它的BODY内容被加载到DOM中。

这就是为什么您的按钮显示成功但单击事件不起作用的原因。在页面转换期间忽略其父 HEAD 的相同单击事件。

如果您想了解更多信息，请阅读我的另一篇文章：为什么我必须将所有脚本放在 jquery mobile 中的 index.html 中

这是官方文档：http: //jquerymobile.com/demos/1.2.0/docs/pages/page-links.html

不幸的是，您不会在他们的文档中找到此描述。以太他们认为这是一个常识，或者他们忘记像我的其他主题一样描述这个。（jQuery Mobile 文档很大，但缺少很多东西）。

解决方案 1

在您的第二页和其他所有页面中，将您的 SCRIPT 标签移动到 BODY 内容中，如下所示：

<body>
    <script>
        // Your javascript will go here
    </script>
    // And rest of your HTML content
</body>

这是一个快速的解决方案，但仍然是一个丑陋的解决方案。

解决方案 2

将您的所有 javascript 移动到原始的第一个 HTML 中。收集所有内容并将其放入单个 js 文件中，放入 HEAD。在加载 jQuery Mobile 后初始化它。

<head>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>    
    <script src="index.js"></script> // Put your code into a new file
</head>

最后，我将描述为什么这是一个好的解决方案的一部分。

解决方案 3

在您的按钮和用于更改页面的每个元素中使用rel="external" 。因为它需要使用 ajax 来加载页面，并且您的 jQuery Mobile 应用程序将表现得像一个普通的 Web 应用程序。不幸的是，在您的情况下，这不是一个好的解决方案。Phonegap 永远不能作为普通的网络应用程序运行。

<a href="#second" class="ui-btn-right" rel="external">Next</a>

官方文档，找一章：Linking without Ajax

现实的解决方案

现实的解决方案将使用解决方案 2。但与解决方案 2 不同，我将使用相同的 index.js 文件并在每个可能的其他页面的 HEAD 中对其进行初始化。

现在你可以问我为什么？

像 jQuery Mobile 这样的 Phonegap 是有缺陷的，如果您的每个 js 内容都在一个 HTML 文件中，迟早会出现错误并且您的应用程序将失败（包括加载的 DOM）。DOM 可能会被删除，Phonegap 会刷新您当前的页面。如果该页面没有javascript，则在重新启动之前它将无法工作。

于 2013-05-07T18:04:29.703 回答