javascript - Chrome と Jquery の奇妙な動作

Question

2 つのテーブルを表示する単純な jsp ページを作成する必要がありました。テーブルを生成する JSP ページが既に存在していたので、別のパラメーターでページを呼び出し、結果を別の div にロードするだけで済みました。

私が最初に試みたのは、2 つの JQuery ロードを呼び出すことでした。

$(function() {
    $("#res_05").load("tableGenerator.jsp", 
        {
            "RESOURCE_NAME": "<%= resName1 %>",
        },
        function(responseText, textStatus, XMLHttpRequest) {
            var firstTable = $("#res_05 table table").first();

            $("#res_05").html(firstTable);
            $("<h1> Resource <%= resName1 %> </h1>").insertBefore("#res_05 table");
    });

    $("#res_15").load("tableGenerator.jsp", 
            {
                "RESOURCE_NAME":"<%= resName2 %>",
            },
            function(responseText, textStatus, XMLHttpRequest) {
                var secondTable = $("#res_15 table table").first();

                $("#res_15").html(secondTable);
                $("<h1> Resource <%= resName2 %> </h1>").insertBefore("#res_15 table");
    });
});

この単純なページは、Firefox や Internet Eplorer 8 でも機能しますが、Chrome では奇妙な動作をします。つまり、最初のテーブルしか表示されません。

この最初の試みの後、複雑さを増す前に、負荷を関数に集中させました。したがって、スクリプトは次のようになります。

$(function() {
    loadTable("res_05", "<%= resName1 %>");

    loadTable("res_15", "<%= resName2 %>");
});


function loadTable(divName, resName) {
        $("#" + divName).load("tableGenerator.jsp",
            {
                "RESOURCE_NAME": resName,
            },
            function(responseText, textStatus, XMLHttpRequest) {
                var firstTable = $("#" + divName + " table table").first();

                $("#" + divName).html(firstTable);
                $("<h1> Resource " + resName + "</h1>").insertBefore("#" + divName + " table");
        });
} 

この変更後、ページはすべてのブラウザーで動作しました。Chrome を使用していても問題ありません。

これは Chrome からの間違った JavaScript 解釈が原因のようですが、JQuery を使用する場合はまれなケースです。やっぱり IE 8 でも動きましたが、Chrome でこんな挙動になるとは思っていませんでした。

私は JQuery の専門家ではないので、ブラウザーの問題でなければ、そのような状況で何が起こるかを理解したいと思います。