gpt4 book ai didi

javascript - 使用 jQuery 动态创建 hello world 页面不起作用

转载 作者:行者123 更新时间:2023-11-28 16:06:58 25 4
gpt4 key购买 nike

编辑

我不明白为什么人们在没有真正尝试这个问题的情况下就投了反对票。我将重写这个问题,试图更清楚地解释我自己。抱歉,如果我的解释不正确。

我有一个简单的 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>

它呈现如下:

enter image description here

(这就是为什么我将它标记为 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响应返回,我想再次执行它。

最佳答案

我认为真正的问题是你不能拥有 <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) .

关于javascript - 使用 jQuery 动态创建 hello world 页面不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14507008/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com