jQueryUIがページに読み込まれない

debugcn 投稿 Dev

マルコ・ビゾッキ

:-)

私は今朝この問題を抱えています。

リストにjquery-uiメソッド呼び出し.sortable（）を使用したいのですが、この問題が発生しました。console.logにページをロードすると、次のように表示されます。ReferenceError：$が定義されていません。

ここにコードがあります：これは

<head>
        <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>Sovversivi e Partigiani - Back-end - Gestione Sovversivi</title>
        
        <script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
        <!-- fontawesome -->
        <!-- CSS -->
        <link rel="stylesheet" href="../CSS/personale.css"/>
        <link rel="stylesheet" href="../CSS/jquery-ui.min.css"/>
        <link rel="stylesheet" href="../CSS/jquery-ui.structure.min.css">
        <link rel="stylesheet" href="../CSS/jquery-ui.theme.min.css">
         <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
        <link href="https://fonts.googleapis.com/css?family=EB+Garamond" rel="stylesheet">
        
    </head>

これがリストです（ブートストラップ4付き）

<div class="row" id="contenutoDaOrdinare">
              <ul class="list-group" id="sortable">
                    <li class="list-group-item">Cras justo odio</li>
                    <li class="list-group-item">Dapibus ac facilisis in</li>
                    <li class="list-group-item">Morbi leo risus</li>
                    <li class="list-group-item">Porta ac consectetur ac</li>
                    <li class="list-group-item">Vestibulum at eros</li>
              </ul>
          </div>

そして体の終わりにこれ：

<script type="text/javascript">
  $( function() {
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
  } );
    	
</script>   
    <!-- Libreria Jquery Bootstrap -->
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    
    <!-- Popper JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <script src="../JS/getusers.js"></script>
    <script src="../JS/jquery-ui.js"></script>
    </body>

これが私のルートの構造です：

リストをhtmlでソート可能にしたい。手伝って頂けますか？どうもありがとう！

アンドリューシュルツ

jQuery UIに依存しているため、jQueryライブラリをロードした後でそのインラインスクリプトを移動する必要があります。

    <!-- Libreria Jquery Bootstrap -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <!-- Popper JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <script src="../JS/getusers.js"></script>
    <script src="../JS/jquery-ui.js"></script>

<script type="text/javascript">
  $( function() {
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
  } );

</script>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]