通过ajax加载的jQuery数据表未注册为jQuery插件

Question

我正在通过jquery ajax加载一些HTML，作为响应的一部分，有一个对jquery Datatables的脚本引用。 我看到脚本可以很好地加载，但是该插件未在jQuery中注册（这是tte初始页面加载的一部分）。 因此，当我调用$（container）.DataTable（...）时，该函数未定义。 正常加载数据表（而不是通过Ajax）时，相同的代码有效。 由于某种原因，动态加载它会导致此失败。 任何可能导致它的指针吗？

Answer 1

问题在于，将内容注入到页面时，不会执行<script>标记，请参阅Element.innerHTML-安全注意事项 。

最简单的方法是在主页中包含DataTables CSS / JS文件，并将其从AJAX内容中删除。 我已经排除了jQuery，因为您已经提到它已经是主页的一部分。

<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.6/css/jquery.dataTables.css">  

<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.6/js/jquery.dataTables.js"></script>

另一个选择是动态加载DataTables，如下所示。 但是，您将需要使用某种页面标识机制来通过页面ID确定是否需要DataTables库。 此外，如果您需要除DataTables之外的其他库，则下面的脚本会更复杂。

$.ajax("/path/to/script.php")
    .done(function(){
        $('head').append(
            $('<link rel="stylesheet" type="text/css" />')
                .attr('href', '//cdn.datatables.net/1.10.6/css/jquery.dataTables.css') 
        );

        $.ajax(
            url: '//cdn.datatables.net/1.10.6/js/jquery.dataTables.js', 
            cache: true,
            dataType: 'script'
        ).done(function(){
           // DataTables initialization
        });
    });