jQuery Mobile:PageInitイベントが発生しません -- jquery フィールド と jquery-mobile フィールド 関連 問題

Jquery mobile: pageinit event not fired












1
vote

問題

日本語

誰かがこのコードで私を助けてくれることができますか?これは修正するのに愚かなものかもしれませんが、私は今何時間以来これに向かって立ち往生しています! PageInitイベントは起動しません。発射される唯一の方法は、閉じるタグの直前に、スクリプトをボディのinisde inisdeに移動することですが、私はどんな公式のドキュメンテーションにも見つからなかったこの奇妙な構造で、そして私は間違っているのです! サムスンの電話エミュレータ(AVD)でテストしています。

<事前> <コード> <!DOCTYPE html> <html> <head> <meta name="generator" content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1" /> <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/jquery-1.8.2.min.js"></script> <script> $( document ).delegate("#aboutPage", "pageinit", function () { alert('ok'); alert($('#homePage').text()); }); </script> <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> <title>Test Mobile Application</title> </head> <body> <div data-role="popup" id="popupBasic"> <p>-....</p> </div> <!-- Begin Homepage --> <section id="homePage" data-role="page" data-theme="a"> <header data-role="header" data-position="fixed"> <h1>Header</h1> </header> <div class="content" data-role="content"> <p>Homepage</p> <a onclick="javascript:alert($('#homePage').text());" data-role="button">aaaaa</a> <p> <a href="#aboutPage">Go to About Page</a> </p> <a href="#popupBasic" data-rel="popup">Open Popup</a> </div> <footer data-role="footer" data-position="fixed"> <h1>Footer</h1> </footer> </section> <!-- End Homepage --> <!-- Begin About Page --> <section id="aboutPage" data-role="page" data-theme="b"> <header data-role="header" data-position="fixed"> <h1>Header</h1> </header> <div class="content" data-role="content"> <p>This is About Page</p> <p> <a href="#portfolioPage">Go to Portfolio Page</a> </p> </div> <footer data-role="footer" data-position="fixed"> <h1>Footer</h1> </footer> </section> <!-- End About page --> <!-- Begin Portfolio Page --> <section id="portfolioPage" data-role="page" data-theme="a"> <header data-role="header" data-position="fixed" data-theme="d"> <h1>Header</h1> </header> <div class="content" data-role="content" data-theme="c"> <p>This is Portfolio Page</p> <p> <a href="#homePage">Go back to Homepage</a> </p> </div> <footer data-role="footer" data-position="fixed" data-theme="d"> <h1>Footer</h1> </footer> </section> <!-- End Portfolio page --> </body> </html>
英語

Can somebody out there help me out with this code please? This might be something stupid to fix but I've been now stuck with this since hours! pageinit event doesn't fire. The only way to get it fired is to move the script inisde the body, just before the closing tag, but this weird structure I haven't found in any official documentation, and I suspect is wrong ! I am testing on Samsung phone emulator (avd).

<!DOCTYPE html> <html>   <head>     <meta name="generator"     content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />     <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1" />       <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/jquery-1.8.2.min.js"></script>     <script>        $( document ).delegate("#aboutPage", "pageinit", function () {                 alert('ok');             alert($('#homePage').text());         });  </script>     <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>     <title>Test Mobile Application</title>   </head>   <body>     <div data-role="popup" id="popupBasic">       <p>-....</p>     </div>     <!-- Begin Homepage -->     <section id="homePage" data-role="page" data-theme="a">       <header data-role="header" data-position="fixed">         <h1>Header</h1>       </header>       <div class="content" data-role="content">         <p>Homepage</p>         <a onclick="javascript:alert($('#homePage').text());" data-role="button">aaaaa</a>         <p>           <a href="#aboutPage">Go to About Page</a>         </p>         <a href="#popupBasic" data-rel="popup">Open Popup</a>       </div>       <footer data-role="footer" data-position="fixed">         <h1>Footer</h1>       </footer>     </section>     <!-- End Homepage -->     <!-- Begin About Page -->     <section id="aboutPage" data-role="page" data-theme="b">       <header data-role="header" data-position="fixed">         <h1>Header</h1>       </header>       <div class="content" data-role="content">         <p>This is About Page</p>         <p>           <a href="#portfolioPage">Go to Portfolio Page</a>         </p>       </div>       <footer data-role="footer" data-position="fixed">         <h1>Footer</h1>       </footer>     </section>     <!-- End About page -->     <!-- Begin Portfolio Page -->     <section id="portfolioPage" data-role="page" data-theme="a">       <header data-role="header" data-position="fixed" data-theme="d">         <h1>Header</h1>       </header>       <div class="content" data-role="content" data-theme="c">         <p>This is Portfolio Page</p>         <p>           <a href="#homePage">Go back to Homepage</a>         </p>       </div>       <footer data-role="footer" data-position="fixed" data-theme="d">         <h1>Footer</h1>       </footer>     </section>     <!-- End Portfolio page -->   </body> </html> 
</div
     
 
 

回答リスト

2
 
vote
vote
ベストアンサー
 

あなたのコードは罰金です。 <コード> pageinit() <コード> aaaa ボタンまたはLink Go to About Page をクリックして、概要ページが取得されている場合は、が1回呼び出されています。

物事のカップル:

最初の link .profile-post-setting { width: 350px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } 0 まずそれを使用して

<事前> <コード> .profile-post-setting { width: 350px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } 1

であるべきです <事前> <コード> .profile-post-setting { width: 350px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } 2

2番目のあなたはjQuery 1.8.2を使用しているので、<コード> .profile-post-setting { width: 350px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } 3 から<コード> .profile-post-setting { width: 350px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } 4

への切り替えを検討することができます。 <事前> <コード> .profile-post-setting { width: 350px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } 5

 

Your code works just fine. pageinit() is being called exactly once when your About page is being fetched either by clicking on aaaa button or by link Go to About Page.

Couple of things though:

First Link jquery.mobile first then use it

<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script>     //Your code as of right now </script> <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> 

Should be

<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> <script>     //Your code goes here </script> 

Second Since you're using jquery 1.8.2 you may consider switch from delegate() to on()

   $(document).on("pageinit", "#aboutPage", function () {         alert('ok');         alert($('#homePage').text());     }); 
</div
 
 
   
   
0
 
vote

大きな検索の後、PageInitイベントはAjaxのために起動しないことを見つけました。次に、次のページを呼び出すリンク内でデータを追加します.Ajax = "false" 2ページ目

 

After some big search I found that the pageinit event doesn't fired due Ajax. Then in the link where you call next page add data-ajax="false" Second Page

</div
 
 

関連する質問

1  iOS PhoneGapのためのちらつきの修正スクロールの問題  ( Flickering fix for ios phonegap causing scroll issue ) 
私はiOS PhoneGapアプリのためのコードで点滅を削除するためにコードを下回った: <事前> <コード> .ui-mobile, .ui-mobile .ui-page, .ui-mobile [data-role="page"], .ui-mobile...

0  AjaxとjQueryでHTMLを読み込む方法  ( How to get load html with ajax and jquery ) 
jQueryMobileを使っています。最新の投稿を取得するページがあります。 ViewPosts.phpからHTMLを取得できないようにします。 <事前> <コード> $("#refresh").click(function(){ ...

-2  jQuery Mobile Iscrollヘッダ隠れているiOSのテキストフィールドに焦点を当てるか?  ( Jquery mobile iscroll header hiding when focus in text field in ios ) 
jQuery Mobile Iscroll Header iOSアプリでテキストフィールドフォームに焦点を合わせると隠れています。 キーボードが表示されたときにテキストフィールドにフォーカスを置いて修正されたヘッダーを作成する方法。 <事前> <コード> ...

1  PhoneGap Audio Mediaファイルのアップロードを試みる - Works iOS、ファイルが見つかりませんAndroid  ( Phonegap attempting to upload audio media file works ios file cannot be found ) 
PhoneGap Media APIとiOSの場合は、オーディオを記録し、ファイルAPIを使用しているアプリを記録します。 ユーザーが accept&ampをクリックすると;アップロードボタン、アプリはそのファイルをPhoneGapのFile.FileTr...

11  jQuery Mobileボタンの背景色  ( Jquery mobile button background color ) 
これはjQuery Mobileボタンの私のコードです <事前> <コード> <a href="#" data-role="button" style="color:green; background-color:red";> Search </a> ...

11  jQuery Mobile Color Swatchを動的に変更します  ( Change jquery mobile color swatch dynamically ) 
JQuery-Mobileボタンの色スウォッチをJavaScriptで動的に変更したいが、「すべてのクラスやイベントハンドラの削除と追加」を除くが、それが乱雑な場合は乱用を除いてください。 それをする最善の方法は何ですか? ...

2  10Sec JQuery MobileごとにDIVを自動ロードしてリフレッシュします  ( Auto load and refresh div every 10sec jquery mobile ) 
jQuery Mobileを使用していて、DIVを特定の時間間隔を更新したいです。 私はを使ってみました <事前> <コード> $( document ).ready(function() { $.getJSON( "data.json", ...

3  jQuery Mobileのいくつかのリンクがロードに立ち往生しています  ( Jquery mobile some links stuck on loading ) 
私はjQuery Mobileを使っていて、タイトルが言うように、何らかの理由でリンクスピナーのローディングスピナーで起動し、次のページを開かないでください。これがコードです: <事前> <コード> <div data-role="page"> <di...

0  ASP.NET:.NET Technologiesを使用して、堅牢なWebアプリケーションを開発するために、どのツールが必要ですか? [閉まっている]  ( Asp net using net technologies to develop robust web applications what tools ) 
現在立つにつれて、この質問は私たちのQ&AMPにとって良いフィットではありません。フォーマット。私たちは事実、参考文献、または専門知識によって支持されることを期待していますが、この質問は...

1  jQuery Mobileで親ページを隠すことなくダイアログページを開くことができますか?  ( Can i open a dialog page without hiding the parent page in jquery mobile ) 
私は2ページを持っています、1つはプロフィールページであり、もう1つはプロフィールページにコメントするダイアログページです。問題は、init()メソッドが起動されたときにプロファイルページにありますが、DOMを更新しますが、ダイアログページがinit()を閉じ...




© 2022 cndgn.com All Rights Reserved. Q&Aハウス 全著作権所有