jquerymobile：有些脚本正在运行，有些脚本没有运行。Can'；我不明白为什么_Jquery_Html_Jquery Ui_Jquery Mobile_Jquery Mobile Ajax

jquerymobile：有些脚本正在运行，有些脚本没有运行。Can'；我不明白为什么

jquery html jquery-ui jquery-mobile

jquerymobile：有些脚本正在运行，有些脚本没有运行。Can'；我不明白为什么,jquery,html,jquery-ui,jquery-mobile,jquery-mobile-ajax,Jquery,Html,Jquery Ui,Jquery Mobile,Jquery Mobile Ajax,jquerymobile和加载额外的脚本让我非常痛苦。我查阅了他们的文档，我了解到他们的AJAX模型会带来一些复杂性，我从这里得到了一些帮助来应用这些信息，但我仍然无法使所有内容都一致地工作。下面是一个例子：我有一个包含两个表单字段的页面，一个用于日期，一个用于时间。我在日期字段调用jQuery UI日期选择器，在时间字段（）调用第三方时间选择器。如果我直接访问页面或进行刷新，两者都可以正常运行。但如果我从其他地方导航到该页面，则只有datepicker运行。它们都在我的文档头中链接，并在页面

jquerymobile和加载额外的脚本让我非常痛苦。我查阅了他们的文档，我了解到他们的AJAX模型会带来一些复杂性，我从这里得到了一些帮助来应用这些信息，但我仍然无法使所有内容都一致地工作。下面是一个例子：

我有一个包含两个表单字段的页面，一个用于日期，一个用于时间。我在日期字段调用jQuery UI日期选择器，在时间字段（）调用第三方时间选择器。如果我直接访问页面或进行刷新，两者都可以正常运行。但如果我从其他地方导航到该页面，则只有datepicker运行。它们都在我的文档头中链接，并在页面上用

pageinit

调用。为什么一个有效，而另一个无效

负责人：


试验场地

有关表格：

<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>


日期：
时间：
$（document）.on（'pageinit'，function（）{
$（“#addAgendaTime”）。时间选择器({
展示期：对，
showLeadingZero：正确
});
});
$（document）.on（'pageinit'，function（）{
$（“#addagendate”）.datepicker（）；
});

我遗漏了什么，导致两者都可以正常加载页面，但只有一个可以加载jquerymobileajax

决心花了一个月的时间，但我终于明白了这一点。Gajotres和Kevin B帮助我理解了潜在的脚本使用问题，但我的每个脚本问题最终都有不同的附加问题：

下面的日期和时间选择器不一致实际上是由于 CSS问题与z索引。时间选择器正在弹出，工作正常脚本方面，但出于某种原因，jQueryUI正在设置其z索引内联设置为零，这使其位于移动页面覆盖的后面。CSS 覆盖（必须做一个！重要的）修复了这个问题
与…有争执 jQuery倒计时是一个ID重复的问题，因为我有一个PHP 包括将相同的页脚拉入每页。改班为决心

jQuery Mobile如何处理页面更改要了解这种情况，您需要了解jQuery Mobile是如何工作的。它使用ajax加载其他页面

第一页正常加载。它的头部和身体被加载到DOM，它们在那里等待其他内容。加载第二个页面时，仅将其正文内容加载到DOM
这就是为什么按钮显示成功，但单击事件不起作用。相同的单击事件，其父标题在页面转换期间被忽略
如果您想了解更多信息，请阅读我的另一篇文章：
以下是官方文件：
不幸的是，您不会在他们的文档中找到这些描述。他们是否认为这是一个常识，或者他们忘记像我的其他主题一样描述这一点。（jQuery移动文档很大，但缺少很多东西）
解决方案1 在第二个页面和每隔一个页面中，将脚本标记移动到正文内容中，如下所示：

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

//您的javascript将转到这里 //和其他HTML内容
这是一个快速的解决方案，但仍然是一个丑陋的解决方案
解决方案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移动应用程序的行为将类似于普通的web应用程序。不幸的是，对于您的情况，这不是一个好的解决方案。Phonegap不应作为普通的web应用程序使用

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

官方文档，查找章节：
现实的解决方案实际解决方案将使用解决方案2。但与解决方案2不同的是，我将使用相同的index.js文件，并在每个可能的其他页面的标题中初始化它
现在你可以问我为什么
像jQuery Mobile这样的Phonegap是有缺陷的，如果你的每个js内容都在一个HTML文件中，迟早会出现错误，你的应用程序会失败（包括加载的DOM）。DOM可能被删除，Phonegap将刷新当前页面。如果该页面没有javascript，则在重新启动之前将无法工作。
jQuery Mobile如何处理页面更改要了解这种情况，您需要了解jQuery Mobile是如何工作的。它使用ajax加载其他页面
第一页正常加载。它的头部和身体被加载到DOM，它们在那里等待其他内容。加载第二个页面时，仅将其正文内容加载到DOM
这就是为什么按钮显示成功，但单击事件不起作用。相同的单击事件，其父标题在页面转换期间被忽略
如果您想了解更多信息，请阅读我的另一篇文章：
以下是官方文件：
不幸的是，您不会在他们的文档中找到这些描述。他们是否认为这是一个常识，或者他们忘记像我的其他主题一样描述这一点。（jQuery移动文档很大，但缺少很多东西）
解决方案1 在第二个页面和每隔一个页面中，将脚本标记移动到正文内容中，如下所示：

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

//你的javascript将被删除