1

私は Web 開発が初めてで、2 つのプラグインで問題が発生していました。私はすでにそれを解決するための回避策を見つけましたが、私がしたことについてはまったく確信が持てません。

問題のページは、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',       
} );});

この構造では、ページをロードすると、コンソールに「TypeError: $(...).slimScroll は関数ではありません」というメッセージが表示され、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 イベント ハンドラは 1 つだけ存在する必要があります。

pageLoad()関数またはonLoad()イベントを使用してみてください

于 2016-05-03T21:16:08.797 に答える
0

肯定的ではありませんが、通常は、絶対に必要なスクリプトを他のすべてのスクリプトの前に置くのがベスト プラクティスです。これは、最初にすべての依存関係が読み込まれるまで、ページのコンテンツの読み込みが終了しないようにするためです。

スクリプトの順序を変更することで、一部の時間しか機能しないソリューションが得られる場合があります。

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

于 2016-05-03T21:17:27.270 に答える