4

まず第一に、私は jQuery と JavaScript は初めてですが、HTML と PHP は初めてです。

その問題に関する多くの投稿を見つけましたが、解決策はありません。私は何か（完全に？） 間違っていると思います...

ページにコンテンツを動的に追加する index.php と content.php の 2 つのファイルがあります。

index.php:

<!DOCTYPE html>
<html>
<head xmlns="http://www.w3.org/1999/xhtml">
    <meta charset="UTF-8"></meta>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link type="text/css" rel="stylesheet" href="../css/jquery.mobile-1.1.1.min.css"></link>
    <script type="text/javascript" src="../js/jquery-1.8.1.min.js"></script>
    <script type="text/javascript" src="../js/jquery.mobile-1.1.1.min.js"></script>
    <title>Ajax test</title>

    <script language="JavaScript">

    $(function(){
        $('#page1').click(function(event) {        
            $('#content').load($(this).attr('href')).trigger("create");
            return false;
        });
    });


    $(function(){
        $('#page2').click(function(event) {        
            $('#content').load($(this).attr('href')).trigger("create");
            return false;
        });
    }); 

    </script>

</head>

<body>
    <div id="hm-agenda" data-theme="a" data-role="page">

        <div data-theme="a" data-role="header">
            <h1>Ajax test</h1>
        </div>

        <div id="content" data-role="content">
            Default content
        </div>

    <div data-theme="a" data-role="footer" data-position="fixed" class="nav-glyphish-example">
        <div data-role="navbar" class="nav-glyphish-example" data-grid="d" class="navdiv">
        <ul>
            <li><a href="content.php?page=1" id="page1">Page 1</a></li>
            <li><a href="content.php?page=2" id="page2">Page 2</a></li>
            <li><a href="content.php?page=3" id="page3">Page 3</a></li>
            <li><a href="content.php?page=4" id="page4">Page 4</a></li>
            <li><a href="content.php?page=5" id="page5">Page 5</a></li>
        </ul>
        </div>
    </div>

</body>
</html>

したがって、ナビゲーションで「ページ 1」または「ページ 2」をクリックすると、content.php?page=x が ID「コンテンツ」の div にロードされます。

content.php は次のようになります。

<ul data-role="listview" class="hm-list">
<li data-role="list-divider"><h3>You are on page: <?php print $_GET['page']; ?></h3></li>
</ul>

ファイルを content-div にロードすると、jQuery がスタイリング要素を適用しない場合に正常に機能します。奇妙なことに、ナビゲーションのリンクをクリックした後、スタイルが約 1 秒間適用され、すぐに消えてしまいます。

この例はオンラインでhttp://m.sepulturagenda.ch/ajax/にあります。

どんな助けでも大歓迎です。私は今ここに何時間も在庫があります...

4

2 に答える 2

4

あなたの問題はこの行にあります：

$('#content').load($(this).attr('href')).trigger("create");

メソッドを呼び出す前に、非同期リクエストを作成して.load()おり、完了するのを待っていません.trigger("create")。したがって、基本的には.trigger("create")、初期化する HTML が存在する前にメソッドを呼び出しています。

渡すことができるコールバック関数を利用して、正しいタイミングでメソッド.load()を呼び出すことができます。.trigger("create")

例えば：

$(function(){
    $('#page1').click(function(event) {        
        $('#content').load($(this).attr('href'), function () {
            $('#content').trigger("create");
        }).trigger("create");
        return false;
    });
});

簡単なメモ:

.load()外部コンテンツの読み込みに使用している理由はありますか? jQuery Mobile は、外部コンテンツが適切な形式である限り、これを行います。ここに私が何を意味するかを説明するためのドキュメントがあります: http://jquerymobile.com/demos/1.1.1/docs/pages/page-links.html

そしてサイドノート：

document.readyjQuery Mobile を使用する場合、イベント ハンドラーの使用はお勧めしません。代わりに、jQuery Mobile ページ イベントの 1 つにバインドする必要がありますpageinit。

例えば：

//place this in the global scope
$(document).on('pageinit', '#my-page', function () {
    $('#page1').click(function(event) {        
        $('#content').load($(this).attr('href'), function () {
            $('#content').trigger("create");
        }).trigger("create");
        return false;
    });
});

ただし、ID をイベント ハンドラーのセレクターとして使用しているためclick、イベント ハンドラー ストレートを#page1要素に委譲することもできます。

例えば：

$(document).on('click', '#page1', function () {    
    $('#content').load($(this).attr('href'), function () {
        $('#content').trigger("create");
    }).trigger("create");
    return false;
});

jQuery Mobile イベントのドキュメントは次のとおりです (ページの上部にある大きな黄色の警告を参照してください): http://jquerymobile.com/demos/1.1.1/docs/api/events.html

于 2012-09-18T22:27:30.733 に答える
0

これを行うためのより良い方法があると確信していますが、「ui-btn-active」クラスを追加するように手動で指示することもできます。

 $(function(){
    $('#page2').click(function(event) {  
        $(".ui-btn-active").removeClass("ui-btn-active");   
        $('#content').load($(this).attr('href')).trigger("create");
        $(this).addClass('ui-btn-active');
        return false;
    });
});
于 2012-09-18T21:38:08.003 に答える