Question

我正在一个包含Table插件的网站上工作。该插件由<script>标记导入并使用javascript执行。除了我使用Bootstrap，所以bootstrap.min.js文件也是importet。以下是它的外观：

         <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

         <!-- Include all compiled plugins (below), or include individual files as needed -->
         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

         <script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>

         <script type="text/javascript">
               $(document).ready( function () {
                        $('#table_id').DataTable();
               } );
          </script>

所有这些代码都在关闭<body>标记之前放置。如果我在我的网站空间上传文件并访问该页面，则不会执行任何脚本。如果我查看Chrome中的源代码，我看到的是<script>代码未正确关闭：

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"/>
        <script charset="utf8" src="//cdn.datatables.net/1.10.15/js/jquery.dataTables.js" type="text/javascript"/>
        <script type="text/javascript">
            $(document).ready( function () {
                    $('#table_id').DataTable();
            } );    
    </script>

我已经尝试将脚本放在代码中的不同位置，但每次遇到同样的问题。我也尝试了this回答，但这些评论甚至没有显示在源代码中。

有没有正确的方法来解决这个问题？

（更新：完整代码）：

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"  exclude-result-prefixes="xsl">
<xsl:template match="/">
<html>
    <head>
        <title>Title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

        <!-- Latest compiled and minified Bootstrap CSS -->
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

        <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.15/css/jquery.dataTables.css"/>



    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-lg-12">

                    <table id="table_id" class="display">
                            <thead>
                                <tr>
                                    <th>Column 1</th>
                                    <th>Column 2</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Row 1 Data 1</td>
                                    <td>Row 1 Data 2</td>
                                </tr>
                                <tr>
                                    <td>Row 2 Data 1</td>
                                    <td>Row 2 Data 2</td>
                                </tr>
                            </tbody>
                    </table>

                </div>
            </div>
        </div>
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
         <!-- Include all compiled plugins (below), or include individual files as needed -->
         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

         <script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>

        <script type="text/javascript">
            $(document).ready( function () {
                    $('#table_id').DataTable();
            } );
        </script>
    </body>
</html>

Answer 1

// You are not closing scripts tag

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"/></script>
        <script charset="utf8" src="//cdn.datatables.net/1.10.15/js/jquery.dataTables.js" type="text/javascript"/></script>
        <script type="text/javascript">
            $(document).ready( function () {
                    $('#table_id').DataTable();
            } );   
</script>

Answer 2

我在这里看不到任何问题，但为什么不尝试使用自动关闭脚本标记来加载jQuery。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" />
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"/>
<script charset="utf8" src="//cdn.datatables.net/1.10.15/js/jquery.dataTables.js" type="text/javascript"/>
        <script type="text/javascript">
            $(document).ready( function () {
                    $('#table_id').DataTable();
            });    
    </script>

Answer 3

您使用的是错误的字符集。它是utf-8，而不是utf8。

https://www.w3.org/International/questions/qa-html-encoding-declarations

脚本标记不会关闭

3 个答案: