通过AJAX的jQuery加载脚本(jquery loading script via ajax)

一些设置：
我有一个网站，允许用户运行报告，并得到结果。该网站使用jQuery的布局打造北部，南部，西部和中心的div。北有头和导航菜单，南有页脚信息，西有报告链接的列表和中心显示报告结果（中心最初是空白）。该报告的数据是使用数据表插件以表格形式显示。为了简化示例的目的，所有的报表数据在一个AJAX调用返回，然后呈现为一个DataTable。

因此，例如流程如下：

main.html中：
- 负载
- 负载的jQuery，布局和数据表
- 设置了头，菜单，页脚和报告链接的布局。中心为空白。
用户：
- 点击“报告1”的链接。
main.html中：
- 调用jquery.load（ “report1.html”）。（通常报告1将是一个PHP脚本）
- 此方法返回的数据，并加载到中心DIV报告表。
  - 注：返回的内容是HTML和JS。假定在main.html中加载的数据表的插件将被使用。所以DataTable的无负载在报告中包括的内容。
- 装载JS代码使用命名空间“CenterContent”和具有初始化（）函数
- 在成功加载，初始化（）被调用它执行$（ “＃报告1”）。数据表（）。
用户
- 愉快地回顾了一个漂亮的数据表中的数据

这一切都很好地工作在火狐，Chrome，Safari和IE浏览器最。然而，似乎什么东西在最新的IE（10.0.9200.16750）改变 - 以前版本的IE（10.0.9200.16580）工作正常。我现在有一些问题，最新的IE浏览器 - 数据表未呈现时初始化（）被调用，并得到“对象不支持属性或方法‘的dataTable’”

我创建了一些示例文件，并做了一些测试。我发现，如果report1.html包含脚本标签包括数据表插件（从而迫使数据表当AJAX负载恰好被加载） - 最新的IE浏览器工作正常。（注：当数据表脚本标签从main.html中移到report1.html - 它必须从同一个域中main.html中被加载据我所知，从另一个域加载是一个Ajax侵犯，似乎是在部队当脚本标签是AJAX加载内容。）

我可以移动的DataTable的插件加载到该报告的反应，但是这意味着该插件将被装载每报表运行。好像时间和精力的浪费。而当没有用户报告后运行报告产生任何口是心非？有一些“最佳实践”为这种配方的？

为什么最新的IE抛出这个错误？而不是以前的IE浏览器？我找不到在MS公告的IE不由分说（ http://support.microsoft.com/kb/2898785 ）

下面是我的两个示例文件。任何帮助/咨询/指针是极大的赞赏。

main.html中和report1.html

main.html中

<!DOCTYPE html>
<html>
<head>
    <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Expires" CONTENT="-1">

    <link rel="shortcut icon" href="/favicon.ico" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<!--
-->
    <script src="http://layout.jquery-dev.net/lib/js/jquery.layout-latest.js"></script>
    <link rel="stylesheet" type="text/css" href="http://layout.jquery-dev.net/lib/css/layout-default-latest.css" />

    <script type="text/javascript">
        // Set up some stuff to detect the browser type
        MyNamespace = {};    // Main Namespace and Subnamespaces for each loadable section of the screen
        MyNamespace.CenterContent = {};        // This part is loaded with data and JS

        $(document).ready(function () {
            $('body').layout();
        });

        function loadObject(objStr, url) {
            $(objStr).load(url +"?_" + Date.now(), function(response, status, xhr) {
                if (status == "error") {
                    $(objStr).html('<p>Sorry but there was an error: ' + msg + xhr.status + " " + xhr.statusText + '</p>');
                } else {    // Success
                    try { MyNamespace.CenterContent.JS.Initialize(); }
                    catch(e) { console.log("E3: " + e.message); }
                }
            });
            return false;
        }
    </script>    
    <title>Test Application</title>
</head>
<body>
    <div class="ui-layout-north"><center><h1>North</h1></center></div>
    <div class="ui-layout-west">
        <a href="#" onclick="loadObject('#CenterContent', 'report1.html');" style="font-family:Arial;font-size:10pt;">Report-1</a>
    </div>
    <div class="ui-layout-south"><center><h1>South</h1></center></div>
    <div class="ui-layout-center"><span id="CenterContent"></span></div>
</body>
</HTML>

report1.html：

<head>
<!--  This doesn't seem to work.  I think bcause it is ouside the domain and since it is in ajax loaded content won't load
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
uncomment next line and have DataTables local - then works as expected.
<script type="text/javascript" src="./DataTables-1.9.4/media/js/jquery.dataTables.min.js"></script>
-->
</head>
<script>
    (function( nameSpace, $, undefined ) {
        nameSpace.Initialize = function() {
            $('#report1').dataTable();                
        };
    }( window.MyNamespace.CenterContent.JS = window.MyNamespace.CenterContent.JS || {}, jQuery ));
</script>    

<div id="demo">
    <table id="report1">
        <thead>
            <tr>
                <th>Rendering engine</th>
                <th>Browser</th>
                <th>Platform(s)</th>
                <th>Engine version</th>
                <th>CSS grade</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Gecko</td>
                <td>Firefox 1.0</td>
                <td>Win 98+ / OSX.2+</td>
                <td>1.7</td>
                <td>A</td>
            </tr>
            <tr>
                <td>Gecko</td>
                <td>Camino 1.5</td>
                <td>OSX.3+</td>
                <td>1.8</td>
                <td>A</td>
            </tr>
            <tr>
                <td>Gecko</td>
                <td>Netscape Navigator 9</td>
                <td>Win 98+ / OSX.2+</td>
                <td>1.8</td>
                <td>A</td>
            </tr>
            <tr>
                <td>Gecko</td>
                <td>Mozilla 1.0</td>
                <td>Win 95+ / OSX.1+</td>
                <td>1</td>
                <td>A</td>
            </tr>
        </tbody>
    </table>
</div>