1

jQuery Mobile を使用してプロジェクトを作成していますが、個別の HTML ページをリンクしようとして問題が発生しています。現在のところ、pageInitEvent.htm と pageInitEvent2.htm という 2 つの別個の HTML ファイルがあります。両方のページにボタンがあり、クリックしたときに相互にリンクしたいのですが、最初のページ (pageInitEvent.htm) のボタンがクリックされたときにトリガーされる (またはトリガーされるようにしたい) イベントもあります。$(document).on("pageinit", ".pageinit2", function(){ (pageInitEvent.htm ファイルのセクション) を使用して、このイベントを pageInitEvent2.htm にバインドしました。

私の問題は、両方のボタンに rel="external" を含めないと機能せず、エラーが発生するだけです。両方に rel="external" を追加すると、リンクは正常に機能しますが、イベントまだトリガーされず、ページ遷移が機能しない場合。ページ遷移を損なうことなくイベントを機能させることなく、2 つの個別の html ファイルをリンクする方法はありますか? 複数ページのHTMLファイルを使用してこれを試してみましたが、すべて完全に機能します。それらを別のHTMLファイルに分離すると、すべてが台無しになります

pageInitEvent.htm のコードは次のとおりです。

<!DOCTYPE html>
<html>
<head>
    <title>Listing 4.1</title>
    <!-- name attribute tells the browser the meta tag contains information about the viewport or the display size of the page -->
    <!-- content attribute tells browser to display the page with the same dimensions as the device it is beign viewed on -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The jQuery Mobile CSS style sheet -->
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
    <!-- The standard jQuery library -->
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>


   <script type="text/javascript">
         $(document).on("mobileinit", function(){
            //$.extend allows to merge two objects together
            //$.mobile is the target object to add or merge to
            //The second argument to this function is the settings we want to change or merge to the $.mobile object
            $.extend($.mobile, {
                //change the message that appears when a pageLoadError happens
                pageLoadErrorMessage: 'Either the page cannot be found or it cannot be loaded.'
            });
        }); 

        //binds the pageinitevent with the page pageInit2
        //third argument is an anonymous inner functi
        $(document).on("pageinit", ".pageinit2", function(){
            alert("pageinit is bound!");
        }); 
    </script>

    <!-- The jQuery Mobile library -->
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

</head>
<body>
    <div data-role="page">
        <div data-role="header"><h1>pageInit event example</h1></div>
        <div data-role="content">
            <p>The button below will use AJAX to load another page and trigger a bound event</p>
            <a href="pageInitEvent2.htm" data-role="button" >Click to open a new page</a>
        </div>
    </div>  
</body>
</html>

pageInitEvent2.htm のコードは次のとおりです。

<!DOCTYPE html>
<html>
<head>
<title>pageInitEvent2</title>
    <!-- name attribute tells the browser the meta tag contains information about the viewport or the display size of the page -->
    <!-- content attribute tells browser to display the page with the same dimensions as the device it is beign viewed on -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The JQuery Mobile CSS style sheet -->
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
    <!-- The standard JQuery library -->
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>

    <!-- The jQuery Mobile library -->
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>

<body>
    <div data-role="page"  data-url="pageInitEvent2.htm" class="pageinit2">
        <div data-role="header"><h1>pageinit example</h1></div>
        <div data-role="content">
            <p>fantastic!</p>
            <a href="pageInitEvent.htm" data-role="button" rel="external" >Amazing, now take me back</a>

        </div>
    </div>
</body>
</html>
4

1 に答える 1

0

各 div に一意の ID を割り当ててみてください。

<div id="pageA" data-role="page"></div>
<div id="pageB" data-role="page"></div>
于 2012-11-18T04:16:32.367 に答える