Plugging in a jQuery plugin

StackOverflow https://stackoverflow.com/questions/17606678

题

I'm trying to use the jquery tokeninput plugin, the demos work fine however when I try to implement it I'm hitting a brick wall. Chrome chucks this at me:

Uncaught TypeError: Object [object Object] has no method 'tokenInput'

Below is an excerpt from my <head>, chrome's resource browser shows both jQuery and jquery.tokeninput are loaded fine. No URL issues.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="/media/js/jquery.tokeninput.js"></script>

<script type="text/javascript">
$(document).ready(function () {
    $("#token").tokenInput("/members/api/members/tokeninput_members/?format=json");
});
</script>

And showing that tokeninput has loaded:

Chrome dev tools, showing jquery.tokeninput has indeed loaded

有帮助吗？

解决方案

Right, bare-bones page worked fine. After digging a while longer I found this buried at the base of the page:

<script src="http://code.jquery.com/jquery.js"></script>

It seems having multiple versions of jQuery loaded is not a good thing to do.

其他提示

I am not sure if you already solved it or not. But Try this it should work if your sequence of jquery library inclusion is right (which it seems right), also remove one of jquery.min.js, jquery.js.

Then try this

<script type="text/javascript">
// Any valid variable name is fine.
var j = jQuery.noConflict();

j(document).ready(function () {
    j("#token").tokenInput("/members/api/members/tokeninput_members/?format=json");
});
</script>

Check this out to understand why you might need this.
http://api.jquery.com/jQuery.noConflict/

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top