2016-05-03 4 views
0

Я новичок в веб-разработке и имел проблемы с двумя плагинами. Я уже нашел обходное решение для его решения, но я совсем не убежден в том, что я сделал, поэтому я прошу вас, ребята, если вы можете просветить меня о том, что это такое.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> 

На дне 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 не является функцией « Затем, после касания, я переключил порядок скриптов в файле 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> 

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

ответ

0

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

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

+0

Спасибо, что нашли время, чтобы ответить, Мухаммад. Я читал, что это не лучшая практика, но я попытался объединить оба документа в один, и поведение было таким же, но не признало бы .slimScroll как функцию. – Martin

+0

Вы можете указать образец jsfiddle –

0

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

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

Поместите все скрипты, необходимые для загрузки в голову, и ваш скрипт general.js в конце вашего элемента body.