嗨，我实际上是一个使用 javascript 和 html/css 的新手。
我不明白为什么我的脚本可以在 safari 上运行，但不能在 chrome 和 firefox 上运行... 有什么想法吗？
编辑:在 chrome 和 firefox 中，ul 和 li 元素都没有显示……而且之前的警报也不起作用。我将检查控制台中的错误并再次编辑帖子
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="patients" style="text-align:center">
</div>
<script type="text/javascript">
$.getJSON("http://www.url.com/json",
function(data) {
var items = [];
alert(data[1].patient);
alert(data[1].hr);
$.each(data, function(index, val) {
items.push('<li id="' + index + '">' + val.patient + '<div style="display: none" id="'+val.patient+'"></div></li>');
});
$('<ul/>', {
'class': 'my-new-list',
html: items.join('')
}).appendTo('#patients');
});
</script>
</body>
</html>
最佳答案
您首先要了解的是 javascript 何时在页面上执行。
因此在您发布的代码中，浏览器首先加载 jquery 库。当它遇到你的<script>标记，然后它会尝试执行 $.getJSON()功能。
在您的脚本中，成功完成 json 请求后，它会尝试通过将生成的 html 添加到 #patients 来修改 DOM。 .这不会在 100% 的情况下起作用，因为您不能保证浏览器已经呈现#patients。
您应该首先将您的 javascript 代码包装在一个仅在页面加载后执行的包装器中。
这可以通过几种方式完成。这些是此处的 jQuery 特定方法，因为这就是您正在使用的方法。
$(document).ready(function(){
//your code
});
或者:
$(function(){
//your code
});
原生 javascript 代码看起来像这样:
document.addEventListener('load', function(){
//your code
}, false);
我建议使用其中一种 jQuery 方法。
作为补充提示，您不需要输入 type="text/javascript"在你的脚本标签中。所有浏览器都知道 script 标签表示 javascript。幸运的是，我们早已度过了各种损坏版本的 Internet Explorer 的旧时光。
关于javascript - getJSON 在 Safari 中有效但在 Chrome 或 Firefox 中无效后构建 HTML，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11720189/