2016-05-03 67 views
0

私はWeb開発を初めて使い、2つのプラグインに問題がありました。私はすでにそれを解決するための回避策を見つけましたが、私がしたことについては全く確信していませんので、私はこのことについて私に啓発できるかどうか尋ねます。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は、データのファイルをピックアップし、DataTableの中でそれを表示するコードを持っています。 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> 

これは正常に動作し、エラーは発生しません。 誰かが私に何が起こっているか説明してもらえますか? ありがとうございます!

答えて

0

複数の$(document).ready(function() { }を使用することがこの問題の主な原因です。 Document Readyイベントハンドラは1つだけ必要です。

あなたはpageLoad()機能を使用してみてくださいまたはonLoad()イベント

+0

ムハンマドにお答えいただき、ありがとうございます。私はそれがベストプラクティスではないことを読んだが、私は両方のドキュメントを一つにまとめることを試みた。その振る舞いは同じで、.slimScrollを関数として認識しなかった。 – Martin

+0

jsfiddleサンプルを提供してください –

0

を正でないが、通常、あなたが絶対に頭の中で他のすべての前に必要なスクリプトを置くためのベストプラクティスであることがあります。これは、すべての依存関係が最初にロードされるまでページの内容のロードが完了しないようにするためです。

スクリプトの順序を変更することで、時間のかかる部分だけを解決することができます。

ロードする必要があるすべてのスクリプトをbody要素の最後のheadとgeneral.jsスクリプトに入れます。

関連する問題