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

Constructing HTML after getJSON works in Safari but not in Chrome or Firefox

本文关键字：Chrome 但在 Firefox 无效 有效 构建 HTML Safari getJSON 之后      更新时间：2024-04-20

嗨，我实际上是一个使用javascript和html/css的新手。

我不明白为什么我的剧本适用于safari，但不适用于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请求成功完成后，它将尝试通过向#patients添加生成的html来修改DOM。这在100%的情况下都不起作用，因为你不能保证浏览器已经渲染了#患者。

您应该首先将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。

相关文章：