rangeslider.js jQuery 延迟异常范围滑块不是项目中的函数，但 Codepen 没有问题

Question

我正在尝试使用 rangeslider.js 向我的 Django 项目添加一个范围滑块。我在 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>

Answer 1

我在 html 文件的顶部使用 Django 模板扩展。结果，我从一个名为 base.html 的文件中导入了所有导入内容，其中包含 header/footer 等...

我还在该文件中包含了 jQuery。删除它解决了我的问题

我会留下我的问题，以防有人出于某种原因遇到这个问题

rangeslider.js jQuery 延迟异常范围滑块不是项目中的函数，但 Codepen 没有问题

rangeslider.js jQuery deferred exception rangeslider is not a function in project but no issues with Codepen

javascript

jquery

html

django

rangeslider