1

我是 Web 开发的新手，并且遇到了两个插件的问题。我已经找到了解决它的方法，但是我完全不相信我做了什么，所以我问你们是否可以告诉我这是怎么回事。

有问题的页面使用 SlimScroll 和 DataTables 插件。起初，我有一个像这样的 HTML 文件。

<body>
<!-- STUFF -->
<!-- SCRIPTS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>    
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="plugins/slimScroll/jquery.slimscroll.min.js" type="text/javascript"></script>
<script src="plugins/DataTables/datatables.min.js" type="text/javascript"></script>

<script src="assets/scripts/tablas.js" type="text/javascript"></script>
<script src="assets/scripts/general.js" type="text/javascript"></script>

在底部，general.js 用于处理点击事件和其他内容，而 tablas.js 具有获取包含数据的文件并将其显示在 DataTables 中的代码。general.js 中的相关代码：

$(document).ready(function() {
$('#contenedor-menu').slimScroll({
    height: '100%'
});});

tablas.js 的代码：

$(document).ready(function() {  
$('#tablita').DataTable( {
    "ajax": 'data/COut2.txt',       
} );});

使用这种结构，当我加载页面时，SlimScroll 失败并在控制台中显示消息：“TypeError: $(...).slimScroll is not a function” 然后在触摸之后，我切换了 HTML 中脚本的顺序文件。我先放置数据表，然后再放置 slimscroll。

<script src="plugins/DataTables/datatables.min.js" type="text/javascript"></script> 
<script src="plugins/slimScroll/jquery.slimscroll.min.js" type="text/javascript"></script>

现在它工作正常，没有错误。有人可以向我解释发生了什么吗？提前致谢！

4

2 回答 2

0

使用多个$(document).ready(function() { }是这个问题的主要原因。应该只有一个 Document Ready 事件处理程序。

您可以尝试使用pageLoad()函数或onLoad()事件

于 2016-05-03T21:16:08.797 回答
0

不是积极的，但通常最好的做法是将您绝对需要的脚本放在头脑中的其他所有内容之前。这是为了让页面的内容在所有依赖项都首先加载后才完成加载。

通过重新排序您的脚本，您可能会得到一个仅在某些时候有效的解决方案。

将需要加载的所有脚本放在 head 中，将 general.js 脚本放在 body 元素的末尾。

于 2016-05-03T21:17:27.270 回答