javascript - 为什么 Bootstrap 的 Dropdown Toggle 在某些环境下有效而在其他环境下无效？

Question

我非常困惑为什么我的 Bootstrap 表格底部的页面大小下拉菜单(“每页显示 10 条记录”)在某些环境中有效，但在其他环境中无效。我想创建一个 Bootstrap Table分页功能就像this .当我通过 Sublime Text 或 Brackets(Adobe 的文本编辑器)预览代码时，下拉菜单不起作用。当我将代码插入到 my Squarespace blog 时在页面底部，它也不起作用。但是，当我将代码插入到 JSFiddle 时或者我的 Webflow site ， 有效。什么可能导致冲突？我是编程新手，如果您能给我一些解决问题的提示，我将不胜感激!

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.1/bootstrap-table.min.css">

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<table data-toggle = "table" data-pagination = "true" data-pagination = "true" data-page-list="[10, 20, 50, 100, 200]">
    <thead>
        <tr>
            <th data-sortable="true">Symbol</th>
            <th data-sortable="true">Company Name</th>
            <th data-sortable="true">EV/EBITDA</th>
            <th data-sortable="true">Trailing P/E</th>
            <th data-sortable="true">Forward Dividend Yield</th>
            <th data-sortable="true">Payout Ratio</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>FLWS</td>
            <td>1-800 FLOWERS.COM, Inc.</td>
            <td>9.18</td>
            <td>28.33</td>
            <td>N/A</td>
            <td>N/A</td>
        </tr>
        ...
    </tbody>
</table>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

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

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.1/bootstrap-table.min.js"></script>

Answer 1

jQuery 需要在 Bootstrap 的 JS 文件之前加载:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.1/bootstrap-table.min.js"></script>

它适用于 jsFiddle，因为它们生成正确排序库的标记。如果您在 Stack Snippet 中以相同顺序加载您的库，您会在此站点上看到相同的行为。

值得注意的是，这是在 Bootstrap's site 上明确调用的:

Also note that all plugins depend on jQuery (this means jQuery must be included before the plugin files).