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

我的程序運行！小提琴的作品太：http://jsfiddle.net/yvonnezoe/MKfLU/4/ 但jQuery手機的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」，即使是在小提琴太：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移動工作。