jQuery Плагины конфликт и порядок объявления сценария

Я новичок в веб-разработке, и у меня возникли проблемы с двумя плагинами. Я уже нашел обходной путь, чтобы решить его, но я совсем не уверен в том, что я сделал, поэтому я прошу вас, ребята, если вы можете просветить меня о том, что это о.

Данная страница использует плагины 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>

В самом низу, генерал.js используется для обработки событий click и других материалов, а также tablas.js имеет код, который берет файл с данными и отображает его в DataTables. Соответствующий код от general.js:

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

И код табласа.js:

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

При такой структуре при загрузке страницы SlimScroll завершается ошибкой с сообщением в консоли: «TypeError: $(…).slimScroll не является функцией»
Затем, коснувшись вокруг, я поменял порядок скриптов в HTML-файле. Сначала я ставлю datatables, а затем slimscroll.

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

И теперь он работает нормально, без ошибок.
Может кто-нибудь объяснит мне, что происходит?
Заранее спасибо!

2 ответа

  1. Использование нескольких $(document).ready(function() { }является основной причиной этой проблемы. Должен быть только один обработчик событий готовности документа.

    Вы можете попробовать использовать pageLoad()функцию или onLoad()события

  2. Не положительный, но обычно лучше всего поместить сценарии, которые вам абсолютно нужны, прежде всего в голову. Это делается для того, чтобы содержимое страницы не заканчивалось до тех пор, пока все зависимости не будут загружены первыми.

    Переупорядочивая сценарии, вы можете получить решение, которое будет работать только некоторое время.

    Положите все скрипты, которые вам нужно загрузить в голову и ваш общий.сценарий js в конце элемента тела.