rangelider.js jQueryの遅延例外rangesliderはプロジェクトの関数ではありませんが、Codepenに問題はありません

debugcn 投稿 Dev

SlurpGoose

rangelider.jsを使用して、DjangoプロジェクトにRange-sliderを追加しようとしています。Codepen https://codepen.io/Slurpgoose/pen/GRRpmpXで実用的な例を作成しましたが、すべて正常に動作しているようです。

ローカルホストで同じスライダーを開始しようとすると、jQueryの遅延例外が発生し続けます。

[Error] TypeError: undefined is not a function (near '...$('input[type="range"]').rangeslider...') (anonymous function) (jquery-3.3.1.js:3827)

ここでは、すべてのインポートを含む例を作成しました。jQueryとrangesliderを除くすべてのインポートを削除しようとし、キャッシュをクリアしました。残念ながら、これでは問題は解決しませんでした。

my script is called strategyBuilder.js

私のコードの最小限の例。

$(document).ready(function(){
  console.log("loaded");
  $('.slider').rangeslider({
          polyfill: false,
          rangeClass: 'rangeslider',
          disabledClass: 'rangeslider--disabled',
          horizontalClass: 'rangeslider--horizontal',
          fillClass: 'rangeslider__fill',
          handleClass: 'rangeslider__handle',

          onInit: function() {

          },

          onSlide: function(position, value) {

          },

          onSlideEnd: function(position, value) {

          }
      })
})

.container {
  margin: 10%;
  height: 100%;
  width: 50%;
}

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

    <script src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js"></script>
    <script src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.6.2/bootstrap-slider.js" integrity="sha256-59/apVFrosMLFX2dHZLGvb3nPpu7e0Yx1rsDr1dTRrk=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.2/rangeslider.js" integrity="sha256-ZhpcIWx8GPtl1VEkyV22X7GHSzX1NCdp6BvbXMDHI/g=" crossorigin="anonymous"></script> 
  <script src="{% static 'js/strategyBuilder.js' %}" type="text/javascript"></script>
    
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.6.2/css/bootstrap-slider.css" integrity="sha256-+bpMasWDxDlsVpNW3oZlL7L4RacwsP70u2fZt6Rxrmc=" crossorigin="anonymous" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.2/rangeslider.css" integrity="sha256-jJApoDvazb6sRGbc3gE+wdEAE0cE0H1Ag3k1qCada9c=" crossorigin="anonymous" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.2.1/font-awesome-animation.min.css">
    <link rel="stylesheet" href="{% static 'css/theme.css' %}">
    <link rel="stylesheet" href="{% static 'css/strategyBuilder.css' %}">

<div class="container">
<input class="slider"
    type="range"
    min="1"                    // default 0
    max="100"                // default 100
    step="5"                   // default 1
    value="300"                 // default min + (max-min)/2
    data-orientation="horizontal" // default horizontal
>
</div>

SlurpGoose

HTMLファイルの先頭でDjangoテンプレート拡張を使用していました。その結果、ヘッダー/フッターなどを含むbase.htmlというファイルからすべてのインポートをインポートしていました...

そのファイルにはjQueryも含まれていました。それを削除すると私の問題が修正されました

何らかの理由で誰かがこの問題を抱えている場合に備えて、私の質問を残します

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

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

編集2021-06-11

コメントを追加

サインイン

Related 関連記事

記事