未捕获的类型错误：$(...).chosen(...).on 不是函数答案

【问题标题】：Uncaught TypeError: $(...).chosen(...).on is not a function未捕获的类型错误：$(...).chosen(...).on 不是函数
【发布时间】：2017-07-04 07:29:54
【问题描述】：

我在 UI 上的 <select> 元素上使用了 JQuery 选择函数，它通过 ajax 调用从数据库中填充 <option> 值。

<select id="assetClass" data-placeholder="Choose an Asset Class..."
    class="chosen-select" multiple style="width: 200px;" tabindex="1">
<option value=""></option>

我正在 js 文件中编写 jquery 代码，该代码将 console.log 或 alert 从<select>

中选择或取消选择任何元素

$(".chosen-select").chosen().on("change", function(event, params) {

  if (params.selected) {
    //  $("#status").text('The option: ' + params.selected + ' was selected.');
     console.log(params.selected);

  }
  if (params.deselected) {
  //   $("#status").text('The option: ' + params.deselected + ' was deselected.');
      console.log(params.deselected);
  }});

但问题是当我加载页面时，我得到以下错误

未捕获的类型错误：$(...).chosen(...).on 不是函数

其他stackoverflow答案建议添加（jQuery）；最后如下。

;(function($){
    // your code
})(jQuery);

但问题依然存在。

【问题讨论】：

使用 $.noconfilct();功能
.chosen 不是jQuery方法，好像是插件，你加载插件了吗？
@Esko 如果他没有加载插件，它会说chosen 不是函数，但它会说on 不是函数。所以问题在于chosen() 返回的内容。
您的代码似乎可以正常工作：jsfiddle.net/ep1d6uyr 如果chosen() 方法没有返回 jQuery 对象，则该错误是有意义的，但确实如此。
实际上代码工作正常如果我执行它jsfiddle.net/iamravikk/Legxf0vk/5 但是当我将相同的代码集成到我的项目中时，它会在控制台中给出该错误。

标签： jquery ajax jquery-chosen

【解决方案1】：

我遇到了同样的问题，我必须添加 import "chosen-js" 才能使其正常工作。

【讨论】：

以及从哪里导入

【解决方案2】：

你必须在导入 jQuery 后导入 'chosen-js'

const $ = import 'jquery'  
import 'chosen-js'

【讨论】：

可能我做错了，但对我来说这只会导致Uncaught SyntaxError: Cannot use import statement outside a module