0

編集

実際に問題を試してみずに人々が反対票を投じる理由がわかりません。私の自己をより明確に説明しようとして、質問を書き直します。私の自己紹介が間違っていたらごめんなさい。

私は単純なハローワールドページを持っています:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-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 src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

</head>
<body>
    <div id="c">

        <div data-role="page">
            <div data-role="header"> <h1 style="font-size: 150%;"> My Title </h1></div>
            <br />  <br />

            <div data-role="Number">
                <p>
                    <h1 style="text-align: center; font-size: 310%;">
                        Hello Wold</h1>
                </p>
            </div>            
        </div>

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

そしてそれは次のようにレンダリングされます:

ここに画像の説明を入力

(そのため、jquery とタグ付けします。jquery のルック アンド フィールが必要です)

ページが正常にレンダリングされることに注意してください。問題は、その html を動的に配置したいということです。次のように ajax を使用してコンテンツを取得します。

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-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 src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

</head>
<body>
    <div id="c">
        <!-- Content will be replaced -->               
    </div>

<script type="text/javascript">

    $.ajax({
        url: 'someUrl',
        success: function (result) {

            // result should equal =
            result= '<div data-role="page"> <div data-role="header"> <h1 style="font-size: 150%;"> My Title </h1></div> <br /> <br /> <div data-role="Number"> <p> <h1 style="text-align: center; font-size: 310%;"> Hello Wold</h1> </p> </div> </div>';
            $('$c').append( result );

        } 
    });



</script>

</body>
</html>

私がそれを実行すると、何もレンダリングされません!. HTMLのスタイリングを担当するjquery関数を知りたいです。ajax の応答が返ってきたら、もう一度実行したいと思います。

4

1 に答える 1

4

<script>本当の問題は、の外側/後にブロックを持てないことだと思います<html>。の直前に移動してみてください</body>。

setTimeoutまた、実際にコードを実行する前に 1 秒余分に待機させたい場合を除き、 の必要はありません。

重要なことは、要素の後にコードを実行する必要があるということです。<div id="c">それは、その直後、または の最後を意味する可能性があり<body>ます。あなたの場合、ページは「その直後」が「」の終わりと同じであるほど単純<body>です。

それにもかかわらず、 の<script>内側<html>、できれば<head>orの内側が必要です ( and<body>の間に配置すると動作することがわかりましたが、それはお勧めしません。<head><body>

提案として、jQuery を使用しているので、その DOM 操作を利用することもできます。を使用する代わりにDOMElement.innerHTML =、jQuery セレクターを使用して ID ( #) とその.html()メソッドで選択してみてください。

var htmlContent = '<div data-role="page"> <div data-role="header"> <h1 style="font-size: 150%;"> My Title </h1></div> <br /> <br /> <div data-role="Number"> <p> <h1 style="text-align: center; font-size: 310%;"> Hello Wold</h1> </p> </div> </div>';
$("#c").html(htmlContent);

を使用する.html()ことは常に正しい選択ではありませんが、単に HTML を含めるだけなので、使用する必要があります。別のオプションは、を使用すること.append(htmlContent)です。

于 2013-01-24T17:19:18.463 に答える