jQuery插件衝突和腳本聲明順序

我是web開發新手，並且遇到了兩個插件的問題。我已經找到了一個解決方法，但我並不確信我做了什麼，所以我問你們是否能夠啓發我這是怎麼回事。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有拿起文件數據並將其顯示在數據表中的代碼。從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文件中腳本的順序。我先放數據表，然後slimscroll。

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

現在它工作正常，沒有錯誤。請問有人請向我解釋發生了什麼事？在此先感謝！

來源

2016-05-03 Martin

使用多個$(document).ready(function() { }是此問題的主要原因。應該只有一個Document Ready事件處理程序。

您可以嘗試使用pageLoad()功能或onLoad()事件

來源

2016-05-03 21:16:08

謝謝您花時間回答穆罕默德。我讀過這不是最佳做法，但我嘗試將兩個文檔合併爲一個，行爲相同，它不會將.slimScroll識別爲函數。 – Martin

可以請你提供一個jsfiddle樣本 –

並不積極，但通常是把你的腦袋一切之前，絕對需要腳本的最佳實踐。這是爲了使頁面的內容不會完成加載，直到首先加載所有依賴關係。

通過對腳本進行重新排序，您可能會有一種解決方案只適用於部分時間。

將所有需要載入頭部的腳本和您的general.js腳本放在body元素的末尾。

來源

2016-05-03 21:17:27

jQuery插件衝突和腳本聲明順序

回答

相關問題