0

编辑

我不明白为什么人们在没有实际尝试问题的情况下投反对票。我将重写这个问题，试图更清楚地解释我自己。对不起，如果我错误地解释了我自己。

我有一个简单的 hello world 页面：

<!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>

如果我运行，什么都不会渲染！我想知道哪个 jquery 函数负责为 html 设置样式。一旦我的 ajax 响应返回，我想再次执行它。

4

1 回答 1

4

我认为真正的问题是你不能<script>在<html>. 试着把它移到右边</body>。

setTimeout除非你真的希望它在运行你的代码之前多等一秒钟，否则没有必要。

重要的是您需要在元素之后运行代码。<div id="c">这可能意味着就在它之后，或者在<body>. 在您的情况下，您的页面很简单，“紧随其后”与“结束<body>”相同。

尽管如此，你需要有<script>内部<html>，最好是内部<head>或<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 回答