Jquery 插件给出错误 $(...).ionRangeSlider 不是函数
Posted
技术标签:
【中文标题】Jquery 插件给出错误 $(...).ionRangeSlider 不是函数【英文标题】:Jquery plugins giving errors $(...).ionRangeSlider not a function 【发布时间】:2017-11-13 22:28:33 【问题描述】:我正在尝试在我的反应应用程序中使用 jquery 插件。每次我尝试使用一些 jquery 第三方插件时,都会收到一条错误消息,提示 $(...).somePlugin not a function。目前我正在尝试使用 ionRangeSlider。它给了我错误
Uncaught TypeError: (0 , _jquery2.default)(...).ionRangeSlider is not a function
js文件
import $ from 'jquery'
import 'bootstrap-tagsinput'
class AddTagSection extends Component
componentDidMount=()=>
this.slider = $(this.inputSlider).ionRangeSlider();
<div className="irs-wrapper">
<input type="text" ref=node=>this.inputSlider=node className='input-slider' id="ionSlider-newTag" name="ionSlider"/>
</div>
下面是 ionRangeSlider.js(插件)中调用的函数
$.fn.ionRangeSlider = function (options)
return this.each(function()
if (!$.data(this, "ionRangeSlider"))
$.data(this, "ionRangeSlider", new IonRangeSlider(this, options, plugin_count++));
);
;
据我在网上阅读,这是一个多 jquery 冲突问题。
关于我的应用程序:我的项目通过 npm 安装了 jquery。所以 package.json 中有一个 jquery。我还在 index.jade 文件的脚本中包含了 jquery。所以那里还有一个。
这不是将 jquery 放在插件的 js 文件之后的问题。我将 jquery 放在 index.jade 文件脚本的顶部。
block head_scripts
script(src='https://code.jquery.com/jquery-3.2.1.min.js')
script(src='/public/ion.rangeSlider.js')
link(href='/public/normalize.css' rel="stylesheet")
link(href='/public/ion.rangeSlider.css' rel="stylesheet")
link(href='/public/ion.rangeSlider.skinFlat.css' rel='stylesheet')
我也试过 noConfilct。但这也没有用。
var $ = jQuery.noConflict();
$( ".slider" ).ionRangeSlider();
我尝试在我的 webpack config.js 文件中包含 jquery
new webpack.ProvidePlugin(
React: 'react',
$: 'jquery',
jQuery: 'jquery'
),
以上没有任何效果。每次我得到同样的错误。
我该如何解决这个问题?
【问题讨论】:
看起来你只包含了 IonRangeSlider CSS 文件,而不是 JS 不,我已经包含了它。 @RoryMcCrossan 还有什么你认为我遗漏或做错了吗? 【参考方案1】:尝试将 rangeslider 的内部 url 更改为外部 url
<script src="http://ionden.com/a/plugins/ion.rangeSlider/static/js/ion-rangeSlider/ion.rangeSlider.js"></script>
<link rel="stylesheet" href="http://ionden.com/a/plugins/ion.rangeSlider/static/css/ion.rangeSlider.css" />
如果不使用 es6 转译器,则从 'react-rangeslider' 导入 Slider,然后执行 var Slider = require('react-rangeslider')
【讨论】:
ionRangeSlider 无法使用外部网址。 但是为什么我需要这样做。我已经包括脚本。我没有通过 npm 安装它,因为我已经包含在脚本中。 我已经编辑了我的 sn-p 。现在你可以尝试使用外部 url。有一天我会遇到这样的问题,然后我使用外部 url 效果很好可能你可以试试看 尝试使用这个版本的jquery 跨度> 不走运。这也是同样的错误。我认为这是我在问题中提到的多个 jquery 冲突问题。【参考方案2】:如果您的项目包含的jQuery
版本与ionRangeSlider
package.json
依赖项中指定的版本不同,并且您使用yarn
安装项目的依赖项并使用webpack
捆绑项目,那么这个可能是问题的根源。 Yarn
甚至会在ion-range-slider
文件夹中安装node_modules
,这将导致webpack
将使用您的jQuery
以及ion-range-slider/node_modules
中的那个来构建项目。因此 jQuery 版本会发生冲突。 ionRangeSlider
以第一个 jQuery
开头,您项目的 jQuery
不会包含它。
这是ionRangeSlider
开发人员的错误,因为他不应该在dependencies
中指定jQuery
,而是在peerDependencies
中指定。
【讨论】:
这应该在最新版本中修复:github.com/IonDen/ion.rangeSlider/issues/…【参考方案3】:我也遇到了这个错误,好像是 Jquery 版本冲突,请尝试在 package.json "ion-rangeslider": "2.2.0" 中降级 ion-rangeslider。
【讨论】:
以上是关于Jquery 插件给出错误 $(...).ionRangeSlider 不是函数的主要内容,如果未能解决你的问题,请参考以下文章
复选框值总是在jquery.serializeJSON插件中给出“false”
Gulp 和 browserify 给出错误:Cannot find module 'jquery' from 'C:....'