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 移动库的功能在做什么？我想调用这样做的方法！

我之所以喜欢调用该方法，是因为我用 ajax 替换了 div id 'c' 的内容，并且页面没有按我想要的方式呈现。换句话说，做：

$.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 回答