3

私はモバイルアプリ開発を学び始めていますが、すでに問題が発生しています。次のファイルがあります。

1. android.html
2. index.html
3. android.js

android.html は読み込みページとして機能し、ページの読み込み時に index.html リンクをそこに取り込みます。リンクがクリックされたとき、リモート ページのデータを #content div から android.html の #container div にロードすることのみを意味します。しかし、これは私にはうまくいかないようです。

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

android.html:

<!DOCTYPE html>
<html>
    <head>
        <title>Jonathan Stark</title>
        <meta name="viewport" content="user-scalable=no, width=device-width" />
        <link rel="apple-touch-icon-precomposed" href="myCustomIcon.png" />
        <link rel="stylesheet" href="css/android.css" type="text/css" media="screen" />
        <script src="cordova-1.6.1.js" type="text/javascript"></script>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="android.js"></script>
    </head>
    <body>
        <div id="header"><h1>Test</h1></div>
        <div id="container"></div>
    </body>
</html>

index.html:

<html>
    <head>
        <title>Jonathan Stark</title>
        <meta name="viewport" content="user-scalable=no, width=device-width" />
        <link rel="stylesheet" type="text/css" href="android.css" media="only screen and (max-width: 480px)" />
        <link rel="stylesheet" type="text/css" href="desktop.css" media="screen and (min-width: 481px)" />
        <!--[if IE]>
            <link rel="stylesheet" type="text/css" href="explorer.css" media="all" />
        <![endif]-->
        <script src="cordova-1.6.1.js" type="text/javascript"></script>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="android.js"></script>
    </head>
    <body>
        <div id="container">
            <div id="header">
                <h1><a href="./">Jonathan Stark</a></h1>
                <div id="utility">
                    <ul>
                        <li><a href="about.html">About</a></li>
                        <li><a href="blog.html">Blog</a></li>
                        <li><a href="contact.html">Contact</a></li>
                    </ul>
                </div>
                <div id="nav">
                    <ul>
                        <li><a href="consulting-clinic.html">Consulting Clinic</a></li>
                        <li><a href="on-call.html">On Call</a></li>
                        <li><a href="development.html">Development</a></li>
                        <li><a href="http://www.oreilly.com">O'Reilly Media, Inc.</a></li>
                    </ul>
                </div>
            </div>
            <div id="content">
                <h2>About</h2>
                <p>Jonathan Stark is a web developer, speaker, and author. His consulting firm, Jonathan Stark Consulting, Inc., has attracted clients such as Staples, Turner Broadcasting, and the PGA Tour. ...</p>
            </div>
            <div id="sidebar">
                <img alt="Manga Portrait of Jonathan Stark" src="jonathanstark-manga-small.png">
                <p>Jonathan Stark is a mobile and web application developer who the Wall Street Journal has called an expert on publishing desktop data to the web.</p>
            </div>
            <div id="footer">
                <ul>
                    <li><a href="services.html">Services</a></li>
                    <li><a href="about.html">About</a></li>
                    <li><a href="blog.html">Blog</a></li>
                </ul>
                <p class="subtle">Jonathan Stark Consulting, Inc.</p>
            </div>
        </div>
    </body>
</html>

私はほとんどすべてのリンク/リモート ページのベース ページとしてこれを使用しています。上記の #content div の h2 タグのタイトルを変更するだけです。

android.js:

   $(document).ready(function() {
    loadPage();

});

function loadPage(url){
    if (url == undefined){

        $('#container').load('index.html #header ul',hijackLinks);

    }
    else{


    $('#container').load(url +  '#content',hijackLinks);    

    }


}

function hijackLinks(){

    $('#container').click(function(e) {

        e.preventDefault();

        loadPage(e.target.href);
    }); 


}

リモートページの #content div のみを取得することを意図しているときに、リンクをクリックすると上記のコードがページ全体を表示する理由を誰かが教えてくれますか?

ありがとう！

4

1 に答える 1

4

http://api.jquery.com/load/

文字列に 1 つ以上のスペース文字が含まれている場合、最初のスペースに続く文字列の部分は、読み込まれるコンテンツを決定する jQuery セレクターと見なされます。

つまり、 2 番目の呼び出しでurlとの間にスペースが必要です。そうしないと、jQuery はそれが URL の一部であると認識します。#content.load()

変化する：

$('#container').load(url +  '#content',hijackLinks);

に：

$('#container').load(url +  ' #content',hijackLinks);

また、クリック リスナーは、ドキュメント準備完了コールバックで呼び出す必要があります。load コールバックに渡される関数は、実際successには ajax 呼び出しが成功したときに実行されるコールバックです。最初のロードが完了したときに実行されるため、ドキュメントの準備ができたときにまだ呼び出されていますが、その方法は明確ではなく、そこに置く必要はありません。hijackLinksへの通話から削除できます.load()。

$(document).ready({ hijackLinks(); loadPages(); });

PShijackLinksリンククリックで実行されることになっている場合は、.clickメソッドのセレクターをから#containerに変更します#container a。

于 2012-07-09T01:11:57.447 に答える