2016-07-27 144 views
0

我正在尝试使用Selectize.js设置一个简单的选择框,并且在页面加载时不断收到错误消息以防止它工作。jQuery与Selectize.js冲突

以下是错误

下面的代码...我只是试图让第一选择框来工作,所以没有为其他任何标识或jQuery的。似乎jQuery出于某种原因与selectize.js冲突,我无法弄清楚。尝试组织脚本标记不同,没有奏效。

$(function() { 
 
    $('#select-category').selectize(); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <title></title> 
 
    <link rel="stylesheet" href="css/app.css"> 
 
    <link rel="stylesheet" type="text/css" media="all" href="css/selectize.css"> 
 
    <script src="bower_components/jquery/dist/jquery.min.js"></script> 
 
    <script type="text/javascript" src="scripts/scripts.js"></script> 
 
    <script type="text/javascript" src="scripts/selectize-custom.js"></script> 
 
    <script type="text/javascript" src="scripts/selectize.min.js"></script> 
 

 
</head> 
 
<body> 
 

 
    <header> 
 
     <div class="wrapper"> 
 
      <a href="" title=""> 
 
       <h1 id="logo">Maark</h1> 
 
      </a> 
 
      <div class="nav-bar"> 
 
       <form> 
 
       <label>Single selection 
 
       <select id="select-category"> 
 
        <option value="0">Zero</option> 
 
        <option value="1">One</option> 
 
        <option value="2">Two</option> 
 
        <option value="3">Three</option> 
 
        <option value="4">Four</option> 
 
       </select> 
 
       </label> 
 
       <label>Multiple selection 
 
       <select multiple> 
 
        <option value="0">Zero</option> 
 
        <option value="1">One</option> 
 
        <option value="2">Two</option> 
 
        <option value="3">Three</option> 
 
        <option value="4">Four</option> 
 
       </select> 
 
       </label> 
 
       </form> 
 
      </div> 
 
     </div> 
 
    </header> 
 

 
    <div class="main-container container-fluid"> 
 

 
      <ul class="row"> 
 
       <li class="gallery-list-item col-md-3 col-sm-4"> 
 
        <figure> 
 
         <a class="" href="#"> 
 
          <img class="img-responsive" src="images/sample-thumb.png" alt=""> 
 
         </a> 
 
         <figcaption> 
 
          <a href="" title="">01_homepage-dashboard</a> 
 
         </figcaption> 
 
        </figure> 
 
       </li> 
 
       <li class="gallery-list-item col-md-3 col-sm-4"> 
 
        <figure> 
 
         <a class="" href="#"> 
 
          <img class="img-responsive" src="images/sample-thumb.png" alt=""> 
 
         </a> 
 
         <figcaption> 
 
          <a href="" title="">01_homepage-dashboard</a> 
 
         </figcaption> 
 
        </figure> 
 
       </li> 
 
       <li class="gallery-list-item col-md-3 col-sm-4"> 
 
        <figure> 
 
         <a class="" href="#"> 
 
          <img class="img-responsive" src="images/sample-thumb.png" alt=""> 
 
         </a> 
 
         <figcaption> 
 
          <a href="" title="">01_homepage-dashboard</a> 
 
         </figcaption> 
 
        </figure> 
 
       </li> 
 
       <li class="gallery-list-item col-md-3 col-sm-4"> 
 
        <figure> 
 
         <a class="" href="#"> 
 
          <img class="img-responsive" src="images/sample-thumb.png" alt=""> 
 
         </a> 
 
         <figcaption> 
 
          <a href="" title="">01_homepage-dashboard</a> 
 
         </figcaption> 
 
        </figure> 
 
       </li> 
 
       <li class="gallery-list-item col-md-3 col-sm-4"> 
 
        <figure> 
 
         <a class="" href="#"> 
 
          <img class="img-responsive" src="images/sample-thumb.png" alt=""> 
 
         </a> 
 
         <figcaption> 
 
          <a href="" title="">01_homepage-dashboard</a> 
 
         </figcaption> 
 
        </figure> 
 
       </li> 
 
       <li class="gallery-list-item col-md-3 col-sm-4"> 
 
        <figure> 
 
         <a class="" href="#"> 
 
          <img class="img-responsive" src="images/sample-thumb.png" alt=""> 
 
         </a> 
 
         <figcaption> 
 
          <a href="" title="">01_homepage-dashboard</a> 
 
         </figcaption> 
 
        </figure> 
 
       </li> 
 
       <li class="gallery-list-item col-md-3 col-sm-4"> 
 
        <figure> 
 
         <a class="" href="#"> 
 
          <img class="img-responsive" src="images/sample-thumb.png" alt=""> 
 
         </a> 
 
         <figcaption> 
 
          <a href="" title="">01_homepage-dashboard</a> 
 
         </figcaption> 
 
        </figure> 
 
       </li> 
 
       <li class="gallery-list-item col-md-3 col-sm-4"> 
 
        <figure> 
 
         <a class="brub" href="#"> 
 
          <img class="img-responsive" src="images/sample-thumb.png" alt=""> 
 
         </a> 
 
         <figcaption> 
 
          <a href="#" title="">01_homepage-dashboard</a> 
 
         </figcaption> 
 
        </figure> 
 
       </li> 
 
       <li class="gallery-list-item col-md-3 col-sm-4"> 
 
        <figure> 
 
         <a class="" href="#"> 
 
          <img class="img-responsive" src="images/sample-thumb.png" alt=""> 
 
         </a> 
 
         <figcaption> 
 
          <a href="" title="">01_homepage-dashboard</a> 
 
         </figcaption> 
 
        </figure> 
 
       </li> 
 
       <li class="gallery-list-item col-md-3 col-sm-4"> 
 
        <figure> 
 
         <a class="" href="#"> 
 
          <img class="img-responsive" src="images/sample-thumb.png" alt=""> 
 
         </a> 
 
         <figcaption> 
 
          <a href="" title="">01_homepage-dashboard</a> 
 
         </figcaption> 
 
        </figure> 
 
       </li> 
 
     </ul> 
 

 

 
    </div> 
 

 

 

 

 

 
</body> 
 
</html>

+1

我相信你在声明函数之前** **定义库。将'scripts/scripts.js'移到'scripts/selectize.min.js'后面,让我们知道发生了什么。我第二@新浪的建议是 – Sina

+1

。 Fwiw,当我将它加载到RequireJS项目中时,我也看到了Selectize中的这个错误 - 但基本上你的代码不明白“selectize”实际上是指那个库,它不知道名称。另一个解决方案是为我工作的,它是在selectize.js之前加载两个依赖关系(sifter.js和microplugin.js),并在您的scriipts.js文件之前加载。我不知道你是否需要像我那样加载的依赖,但如果上述失败,你可以尝试。希望有所帮助。 – RoboBear

回答