$ (...). Tagsinput ist keine Funktion

Ich muss etwas einfaches vermissen, aber ich kann es nicht sehen. Ich bin das Bootstrap tagsinput Plugin und ich versuche, hier einige Beispiele zu folgen: http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/

Hier ist mein Code:

<html> 
    <head> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/bootstrap.tagsinput/0.4.2/bootstrap-tagsinput.css" /> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <script src="https://cdn.jsdelivr.net/bootstrap.tagsinput/0.4.2/bootstrap-tagsinput.min.js"></script> 
    </head> 
    <body> 
    <input id="cities" class="form-control" value="New York,London" data-role="tagsinput" type="text"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
    <script> 
     $(function() { 
     $('#cities').tagsinput({ 
      maxTags: 3 
     }); 
     }); 
    </script> 
    </body> 
</html>

ich folgende Javascript Störung erhalten:

tagsinput.html:15 Uncaught TypeError: $(...).tagsinput is not a function

Ich habe versucht, data-role="tagsinput" wie in this SO answer vorgeschlagen, aber die Eingabe wird ein normales Textfeld und die Ausnahme tritt immer noch auf.

Was mache ich falsch?

Quelle

2016-05-14 aco

Haben Sie versucht, Ihre Skript-Tags neu zu ordnen, so dass jQuery und Bootstrap vor dem Tagsinput-Plugin kommen? – SimianAngel

Sie laden 2 jquery min Dateien in Ihre script Tags.

entfernen Sie das eine nach bootstrap-tagsinput.min.js oder seit dem zweiten ist neuere Version laden, dass anstelle der ersten.

http://jsbin.com/xarasebibi/edit?html,output

Quelle

2016-05-14 03:34:16 Ramanlfc

Ah, dummer Fehler. Vielen Dank! – aco

Sie dupliziert jquery Links. einer oben und der andere unten. und das bootstrap-tag-min-Skript muss erst verlinkt werden, nachdem Sie jquery link eingebunden haben. siehe unten für weitere Informationen. Hoffe das hilft

<html> 
    <head> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/bootstrap.tagsinput/0.4.2/bootstrap-tagsinput.css" /> 
    </head> 
    <body> 
    <input id="cities" class="form-control" value="New York,London" data-role="tagsinput" type="text"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
    <script src="https://cdn.jsdelivr.net/bootstrap.tagsinput/0.4.2/bootstrap-tagsinput.min.js"></script> 
    <script> 
     $(function() { 
     $('#cities').tagsinput({ 
      maxTags: 3 
     }); 
     }); 
    </script> 
    </body> 
</html>

Quelle

2016-05-14 03:58:03 lightup

Das hat es geschafft, danke! – aco

$ (...). Tagsinput ist keine Funktion

Antwort

Verwandte Themen