jquery - Jquery モバイルがモバイルに読み込まれない

Question

私は奇妙な問題を抱えています。このページを任意のブラウザにロードすると、ページは正常に表示されますが、ブラウザ jquery mobile がロードされない場合、次のページが表示されます。

http://www.cuponeraclub.com/landing.html

ブラウザロードjqueryで開く、モバイルjqueryモバイルではロードされません。

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link ref="https://www.cuponeraclub.com/themes/livingsocial_v3.1/css/jquery.mobile-1.2.0.min.css" rel="stylesheet" type="text/css"/>
    <script src="https://www.cuponeraclub.com/themes/livingsocial_v3.1/scripts/jquery-1.8.3.js" type="text/javascript"></script>
    <script src="https://www.cuponeraclub.com/themes/livingsocial_v3.1/scripts/jquery.mobile-1.2.0.min.js" type="text/javascript"></script>

<div data-role="page">
    <div data-role="content">   
            <div class="ui-grid-solo">
                <div class="ui-block-a"><input type="text" id="email" placeholder="Email"></div>
            </div>
            <div class="ui-grid-solo">
                <div class="ui-block-a">
                    <select id="city">
                                                    <option value="22" >Ambato</option>
                                                    <option value="12" >Cuenca</option>
                                                    <option value="25" >Esmeraldas</option>
                                                    <option value="11" selected>Guayaquil</option>
                                                    <option value="26" >Ibarra</option>
                                                    <option value="27" >Loja</option>
                                                    <option value="24" >Machala</option>
                                                    <option value="28" >Manta</option>
                                                    <option value="29" >Portoviejo</option>
                                                    <option value="10" >Quito</option>
                                                    <option value="23" >Riobamba</option>
                                                    <option value="30" >Santo Domingo</option>
                                            </select></div>
            </div>
            <div class="ui-grid-solo">
                    <div class="ui-block-a"><button type="v" data-theme="b">Suscribete</button></div>
            </div>
    </div><!-- /content -->
</div><!-- /page -->


    <script>
    if (typeof jQuery == 'undefined') {  
    alert('undefined');} else {alert('ok');}
    </script>

---

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link ref="https://www.cuponeraclub.com/themes/livingsocial_v3.1/css/jquery.mobile-1.2.0.min.css" rel="stylesheet" type="text/css"/>
    <script src="https://www.cuponeraclub.com/themes/livingsocial_v3.1/scripts/jquery-1.8.3.js" type="text/javascript"></script>
    <script src="https://www.cuponeraclub.com/themes/livingsocial_v3.1/scripts/jquery.mobile-1.2.0.min.js" type="text/javascript"></script>

<div data-role="page">
    <div data-role="content">   
            <div class="ui-grid-solo">
                <div class="ui-block-a"><input type="text" id="email" placeholder="Email"></div>
            </div>
            <div class="ui-grid-solo">
                <div class="ui-block-a">
                    <select id="city">
                                                    <option value="22" >Ambato</option>
                                                    <option value="12" >Cuenca</option>
                                                    <option value="25" >Esmeraldas</option>
                                                    <option value="11" selected>Guayaquil</option>
                                                    <option value="26" >Ibarra</option>
                                                    <option value="27" >Loja</option>
                                                    <option value="24" >Machala</option>
                                                    <option value="28" >Manta</option>
                                                    <option value="29" >Portoviejo</option>
                                                    <option value="10" >Quito</option>
                                                    <option value="23" >Riobamba</option>
                                                    <option value="30" >Santo Domingo</option>
                                            </select></div>
            </div>
            <div class="ui-grid-solo">
                    <div class="ui-block-a"><button type="v" data-theme="b">Suscribete</button></div>
            </div>
    </div><!-- /content -->
</div><!-- /page -->


    <script>
    if (typeof jQuery == 'undefined') {  
    alert('undefined');} else {alert('ok');}
    </script>

Answer 1

アップデート

テスト用にリンクを変更しました。ここにアクセスしてください: http://www.cuponeraclub.com/landing.html?mb

Answer 2

ある時、私は jQuery Mobile アプリケーションを書いていて、その質問に出くわしました。あなたのコードは一般的に問題ありません。あなたの頭に含まれているライブラリが機能していないようです。作業ヘッド スケルトン内のコードは次のとおりです。

    <!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
        <!-- next one gives arning in browser cause of 'target-densitydpi=device-dpi'
<!--<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />-->
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />

        <!--<link rel="stylesheet" href="library/jquerymobile/jquery.mobile-1.4.2.min.css" />-->


        <!--<link rel="stylesheet" type="text/css" href="css/stylesIos.css" />-->
        <link rel="stylesheet" type="text/css" href="../css/jquery.mobile.flatui.css" />

        <!--- scripts -->
        <script type='text/javascript' src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
        <script type='text/javascript' src='./library/jquerysoap/jquery.soap.js'></script>
        <!--<script type="text/javascript" src="./library/jqueryxml2json/jquery.xml2json.pack.js"></script>-->
        <script type="text/javascript" src="../library/jqueryxml2json/jquery.xml2json.new.js"></script>
        <script src="../library/jquerymobile/jquery.mobile-1.4.2.min.js"></script>


        <meta name="msapplication-tap-highlight" content="no" /> 
        <title>Eurofleurs</title>
        <script type="text/javascript">
            // $(document).delegate(".ui-content", "scrollstart", false);
        </script>
    </head>
    <body>
        <div data-role="page">
            <div data-role="content">   
                <div class="ui-grid-solo">
                    <div class="ui-block-a"><input type="text" id="email" placeholder="Email"></div>
                </div>
                <div class="ui-grid-solo">
                    <div class="ui-block-a">
                        <select id="city" data-role="ui-select">
                            <option value="22" >Ambato</option>
                            <option value="12" >Cuenca</option>
                            <option value="25" >Esmeraldas</option>
                            <option value="11" selected>Guayaquil</option>
                            <option value="26" >Ibarra</option>
                            <option value="27" >Loja</option>
                            <option value="24" >Machala</option>
                            <option value="28" >Manta</option>
                            <option value="29" >Portoviejo</option>
                            <option value="10" >Quito</option>
                            <option value="23" >Riobamba</option>
                            <option value="30" >Santo Domingo</option>
                        </select></div>
                </div>
                <div class="ui-grid-solo">
                    <div class="ui-block-a"><button type="v" data-`enter code here`theme="b">Suscribete</button></div>
                </div>
            </div><!-- /content -->
        </div><!-- /page -->
</body>
</html>

Answer 3

問題は、html コードにデータ ロール ページを持つコンテナー div がないことです。この div は、データ ロール コンテンツを含む html div に存在する親である必要があります。

<div data-role='page'>
  <div id="cont" data-role="content" >
  ....
  </div>
</div>

そして、現時点ではこれを持っています

<body> 
    <div id="cont" data-role="content" ...> 
        <div id="wrap" class="ui-grid-solo">

こちらのドキュメントを確認してくださいhttp://jquerymobile.com/demos/1.2.0/docs/about/getting-started.html