标记编辑器- $(...).jsonTagEditor 不是函数答案

【问题标题】：Tag Editor- $(...).jsonTagEditor is not a function标记编辑器- $(...).jsonTagEditor 不是函数
【发布时间】：2017-06-21 21:11:45
【问题描述】：

我只是尝试实现json tag editor 来创建标签编辑器。我想在更大的 laravel 项目中实现它。因此，我包含了 jQuery，以及来自 json 标签编辑器的 js 和 css 文件。一切正常，这是我在网络选项卡下发现的。

现在我有：

一个输入元素：

<input id="keywords" class="form-control" name="keywords"
                                           autofocus></div>

在页面顶部我有：

$().ready(function(){          
     $('#keywords').jsonTagEditor();
});

但我收到一条错误消息 Uncaught TypeError: $(...).jsonTagEditor is not a function...

正如我所说，文件已加载，正如我在网络选项卡中看到的那样......

任何想法可能是什么问题？

再次说明一切，我使用的是 laravel，所以这些文件都包含在主布局文件中，我正在尝试在扩展此主模板的文档中使用它。但不应该改变任何东西，因为我已经在使用其他一些可以正常工作的插件。

有什么想法吗？

【问题讨论】：

【解决方案1】：

经过聊天讨论，问题原来是jQuery的怀疑重新导入和重新初始化。 Laravel 框架通过require() 导入了自己的 jQuery，这是在导入相关插件之后发生的。

将插件导入移动到 <body> 的末尾解决了这个问题，但此外插件（在撰写本文时）有一个错误，必须使用传入的空对象（或可能任何其他值）初始化：

$("#keywords").jsonTagEditor({});

【讨论】：

【解决方案2】：

你忘了写文件

不是这个

$().ready(function(){});

使用这个

$(document).ready( () => {});

=> 表示您使用最新的 JS 标准

【讨论】：

【解决方案3】：

您缺少document，为了确保该元素可访问，请将您的脚本放在结束'</body>' 标记之前，以便它首先加载您的页面内容。

$(document).ready(function(){          
    $('#keywords').jsonTagEditor();
});

【讨论】：

没有document是没有必要的。
好吧$().ready(function()错了，如果他要使用速记法，应该是$(function(){ ... 。
不，$().ready() 很好。 $() 总是返回一个 jQuery 对象，而 .ready() 方法总是做同样的事情。不过我同意简单的$(function() ... ) 会更好。