0
Ich versuche, ein einfaches Auswahlfeld mit Selectize.js einzurichten und beim Laden der Seite eine Fehlermeldung erhalten, die es nicht funktioniert.jQuery im Konflikt mit Selectize.js
Hier ist der Fehler
Hier ist der Code ... Ich versuche nur das erste Auswahlfeld zu bekommen, so zu arbeiten, gibt es keine ID oder jquery für den anderen. Es scheint so, als ob die Jquery aus irgendeinem Grund mit selectize.js in Konflikt steht und ich kann es nicht herausfinden. Versucht, die Script-Tags anders zu organisieren, hat nicht funktioniert.
$(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>
Ich glaube, Sie die Funktion deklarieren ** vor ** Definition der Bibliothek. Verschieben Sie 'scripts/scripts.js' nach' scripts/selectize.min.js' und lassen Sie uns wissen, was passiert. – Sina
Ich zweite @ Sinas Vorschlag. Fwiw, ich habe diesen Fehler auch in Selectize gesehen, als ich ihn in ein RequireJS-Projekt geladen habe - aber im Grunde versteht Ihr Code nicht "selectize" bezieht sich eigentlich auf diese Bibliothek, er kennt den Namen nicht. Eine andere Lösung, eine, die für mich funktionierte, lädt die zwei Abhängigkeiten (sifter.js und microplugin.js) vor selectize.js und auch vor Ihrer scripts.js-Datei. Ich weiß nicht, ob Sie die Abhängigkeiten wie ich geladen haben müssen, aber Sie können es versuchen, wenn das obige fehlschlägt. Ich hoffe, das hilft. – RoboBear