0

私は単純なhtmlページを持っています:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.2">
    <link rel="stylesheet" href="js/jquery.mobile-1.2.0.css" />
    <script src="js/jquery-1.8.2.js"></script>
    <script src="js/jquery.mobile-1.2.0.js"></script>
</head>
  <body>
    <div id="c">

        <div data-role="page">
            <div data-role="header">
                <h1> My Title </h1>
            </div>                        
        </div>

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

ページが読み込まれると、これはjqueryがそのhtmlの本文を「解析/フォーマット」する方法です。

<body>
    <div id="c" class="ui-mobile-viewport ui-overlay-c">
        <div data-role="page" data-url="/jqueryMobile/TC_Page/main.html" tabindex="0" class="ui-page ui-body-c ui-page-active"
            style="min-height: 1464px;">
            <div data-role="header" class="ui-header ui-bar-a" role="banner">
                <h1 class="ui-title" role="heading" aria-level="1">
                    My Title
                </h1>
            </div>
        </div>
        <div class="ui-loader ui-corner-all ui-body-a ui-loader-default">
            <span class="ui-icon ui-icon-loading"></span>
            <h1>
                loading</h1>
        </div>
    </div>
</body>

タグには新しい属性があることに注意してください。今私の質問は、jqueryモバイルライブラリのどの機能がそれを行っているかをどのように知ることができますか? それを行っているメソッドを呼び出したいと思います!

そのメソッドを呼び出す理由は、div id 'c' のコンテンツを ajax に置き換えて、ページが希望どおりにレンダリングされないためです。つまり、次のことを行います。

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

        /*
         result = "content of first example" = 

              <div data-role="page"><div data-role="header"><h1> My Title </h1></div></div>
        */
         $('$c').html( result );   

         // I will like to call here something like:     $('#c').RrenderHtml();

    } 
});

私が望むようにレンダリングされません。正しくレンダリングされない理由は、div id c のタグに、ページの読み込み時に jquery が作成した属性がないためです。

この問題の解決策は次のとおりです。

  <div data-role="page" data-url="/jqueryMobile/TC_Page/main.html" tabindex="0" class="ui-page ui-body-c ui-page-active"
            style="min-height: 1464px;">
            <div data-role="header" class="ui-header ui-bar-a" role="banner">
                <h1 class="ui-title" role="heading" aria-level="1">
                    My Title
                </h1>
            </div>
        </div>
        <div class="ui-loader ui-corner-all ui-body-a ui-loader-default">
            <span class="ui-icon ui-icon-loading"></span>
            <h1>
                loading</h1>
  </div>

それ以外の：

       <div data-role="header">
            <h1>
                My Title
            </h1>
        </div>

ajax 呼び出しで。その解決策の問題は、ページが読み込まれたときに jquery によって新しいページで各応答がどのようにフォーマットされるかを理解する必要があることです。また、テーブルのように動的に作成している応答もあります。たぶん、iFrame を作成してそこに jquery ライブラリを配置し、本文の ajax 呼び出しからの応答をページが読み込まれるのを待ってから、最終的に最終的な結果を得ることができます。

4

1 に答える 1

1

メソッドを知る必要はありません。挿入されたページを拡張するためにすでに提供されている方法があり、それは次のとおりです。

.trigger('create')

詳細はこちら：

于 2013-01-25T16:30:59.873 に答える