Javascript 在getJSON之后构建HTML在Safari中有效，但在Chrome或Firefox中无效_Javascript_Jquery

Javascript 在getJSON之后构建HTML在Safari中有效，但在Chrome或Firefox中无效

javascript jquery

Javascript 在getJSON之后构建HTML在Safari中有效，但在Chrome或Firefox中无效,javascript,jquery,Javascript,Jquery,嗨，我实际上是一个使用javascript和html/css的新手我不明白为什么我的脚本可以在safari上运行，但不能在chrome和firefox上运行。。。有什么想法吗编辑：在chrome和firefox中，ul和li元素都不显示。。。此外，以前的警报也不起作用。我将在控制台中检查错误并再次编辑帖子 <!DOCTYPE html> <html> <head> <script src="http://code.jquer

嗨，我实际上是一个使用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>


$.getJSON（“http://www.url.com/json",
功能（数据）{
var项目=[]；
警报（数据[1]。患者）；
警报（数据[1].hr）；
$.each（数据、函数（索引、val）{
items.push（““+val.patient+””）；
});
$（“”{
“类”：“我的新列表”，
html:items.join（“”）
}).附于（“#患者”）；
});

您必须了解的第一件事是javascript在页面上执行的时间

因此，在您发布的代码中，浏览器首先加载jquery库。当它遇到您的

标记时，它会尝试执行

$.getJSON（）

函数

在您的脚本中，当json请求成功完成时，它试图通过将生成的html添加到

#patients

来修改DOM。这不会在100%的时间内起作用，因为你不能保证浏览器已经呈现了患者

您应该首先将javascript代码包装在一个只在页面加载后执行的包装器中

这可以通过几种方式实现。这里是特定于jQuery的方法，因为您正在使用这些方法

$(document).ready(function(){
    //your code
});

或：

本机javascript代码看起来像：

document.addEventListener('load', function(){
    //your code
}, false);

我建议使用jQuery方法之一

作为补充提示，您不需要在脚本标记中添加

type=“text/javascript”

。所有浏览器都理解脚本标记意味着javascript。幸运的是，我们已经远远超过了Internet Explorer各种损坏版本的旧时代。

定义“不工作”。你试过什么？你犯了什么错误？显示和未显示哪些警报？我也是。你能更新你的帖子，并详细说明“问题”吗？什么不起作用（你期望什么，什么没有发生）。另外，选择一个更具描述性的标题。@RobW：你有足够的声誉来帮助这个新手。根据此问题的内容，您可以轻松编辑问题标题。向新用户提供帮助比断然拒绝和抱怨更主动。。。提供帮助和指导。@user848778:您必须确保我们了解问题所在。您可以做的一个建议是：在FF中使用Firebug检查您的数据，看看您的脚本是否可以正常工作。只要看看你的代码，它肯定会工作。您还可以提供一个证明您的问题的示例，我们可以运行它并亲自查看，并尝试通过示例帮助您解决问题。删除

'class'

周围的引号。对象属性名称不应加引号。@user848778:我反对非类型用法。我建议您始终使用mime类型的脚本标记内容，因为它可以说更为传统。但我确实同意Geuis所说的一切（+1）。使用第二个在DOM ready上运行脚本的脚本，而不是立即运行。尝试了您的解决方案。不幸的是，它不起作用。我正在Os X mountain lion上使用chrome和firefox。Safari很管用这不是一个真正的建议，而是强制性的第一步。您必须将脚本执行延迟到DOM就绪之后。现在，如果您发布更多数据，我们可以开始解决您的问题。

document.addEventListener('load', function(){
    //your code
}, false);