Jquery插件給出錯誤$（...）。ionRangeSlider不是函數

我想在我的反應應用程序中使用jquery插件。每次我嘗試使用一些jquery第三方插件，我得到一個錯誤說$（...）。somePlugin不是一個函數。目前我正在嘗試使用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();

我試過，包括jQuery的在我的WebPack config.js文件，從工作的上述

new webpack.ProvidePlugin({ 
      React: 'react', 
      $: 'jquery', 
      jQuery: 'jquery' 
     }),

沒有。每次我都有同樣的錯誤。

我該如何解決這個問題？

來源

2017-06-12 ApurvG

它看起來像你只包括IonRangeSlider CSS文件，而不是JS –

不，我已經包括它。 – ApurvG

@RoryMcCrossan任何其他ypu認爲我失蹤或做錯了？ – ApurvG

嘗試從「反應-rangeslider不斷變化的內部鏈接到外部URL rangeslider

<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 transpiler然後做變種滑塊=需要（」 react-rangeslider'）

來源

2017-06-13 20:01:33

外部網址不適用於ionRangeSlider。 – ApurvG

但爲什麼我需要這樣做。我已經包括腳本。我沒有通過npm安裝它，因爲我已經包含在腳本中。 – ApurvG

我編輯了我的代碼片段，現在你可以嘗試使用外部網址。有一天我正在經歷像這樣的問題，然後我使用外部網址它運作良好可能是你可以試試看 –

Jquery插件給出錯誤$（...）。ionRangeSlider不是函數

回答

相關問題