jQuery 与 jQuery Mobile - 脚本顺序重要吗？

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>

我的程序可以运行了! fiddle 也可以工作: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”的“未定义”，即使在 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();