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>
我相信你在声明函数之前** **定义库。将'scripts/scripts.js'移到'scripts/selectize.min.js'后面,让我们知道发生了什么。我第二@新浪的建议是 – Sina
。 Fwiw,当我将它加载到RequireJS项目中时,我也看到了Selectize中的这个错误 - 但基本上你的代码不明白“selectize”实际上是指那个库,它不知道名称。另一个解决方案是为我工作的,它是在selectize.js之前加载两个依赖关系(sifter.js和microplugin.js),并在您的scriipts.js文件之前加载。我不知道你是否需要像我那样加载的依赖,但如果上述失败,你可以尝试。希望有所帮助。 – RoboBear