Question

我不知道为什么但是当我以不同的顺序包含脚本时，它似乎会引起一些问题。

当这样的时候：

    <script src="static/jquery.mobile-1.3.1.min.js"></script>
    <script src="static/jquery-1.9.1.min.js"></script>
    <script src="static/jquery-migrate-1.1.1.min.js"></script>

我的程序有效！小提琴也有效：http://jsfiddle.net/yvonnezoe/MKfLU/4/ 但是jQuery mobile的css主题在我的网络应用程序上不再起作用了。

当这样的时候：

    <script src="static/jquery-1.9.1.min.js"></script>
    <script src="static/jquery-migrate-1.1.1.min.js"></script>
    <script src="static/jquery.mobile-1.3.1.min.js"></script>

它不起作用并为变量“textInput”提供了“undefined”，即使在Fiddle上也是如此：http://jsfiddle.net/yvonnezoe/7NZzr/

有人可以告诉我为什么吗？：（

Answer 1

要理解这个问题，您需要了解jQuery Mobile的工作原理。

初始化顺序在第二个示例中不是问题。如果这是一个问题，那么所有这些元素都不会被设计。在你的情况下，你不知道的是，当jQuery Mobile样式形成元素时，它会改变它们的DOM结构。因此，按钮和输入元素不再像在非样式的第一个示例中那样位于同一位置。

这是对你的jsFiddle的修复：http://jsfiddle.net/FmPPW/

改变这个：

$('.TextInput').empty();
textInput = $(this).prev('.TextInput').val();

到此：

$('.TextInput').empty();
textInput = $(this).parent().prev().find('.TextInput').val();

Answer 2

“配置默认值”的文档介绍了mobileinit事件： http://jquerymobile.com/demos/1.0a4.1/docs/api/globalconfig.html

因为mobileinit事件在执行时立即触发，你需要在加载jQuery Mobile之前绑定你的事件处理程序。因此，我们建议您在以下链接到您的JavaScript文件顺序：
<script src="jquery.js"></script>
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>

快速入门指南显示了具有相同顺序的页面模板：http://jquerymobile.com/demos/1.2.1/docs/about/getting-started.html

似乎需要加载jquery才能让jquery-mobile工作。

jQuery vs jQuery Mobile - 脚本序列是否重要？

2 个答案: