3

こんにちは、私は実際には JavaScript と html/css を使用する初心者です。

私のスクリプトが Safari では機能するのに、Chrome や Firefox では機能しない理由がわかりません... 何かアイデアはありますか?

編集:クロムと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>
4

1 に答える 1

3

最初に理解する必要があるのは、JavaScript がページで実行されるタイミングです。

したがって、投稿したコードでは、ブラウザーは最初に jquery ライブラリを読み込みます。タグに遭遇すると<script>、関数の実行を試み$.getJSON()ます。

スクリプトでは、json リクエストが正常に完了すると、生成された html を に追加して DOM を変更しようとしています#patients。ブラウザーが #patients をレンダリングしたことを保証できないため、これは常に 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 のさまざまな壊れたバージョンの古い時代をかなり過ぎています。

于 2012-07-30T11:15:42.600 に答える