当我从另一个 js 页面调用时 RangeSlider.js 不起作用答案

【问题标题】：RangeSlider.js is not working when i call from another js page当我从另一个 js 页面调用时 RangeSlider.js 不起作用
【发布时间】：2018-06-16 07:16:20
【问题描述】：

$element.rangeslider({

    // Deactivate the feature detection
    polyfill: false,

    // Callback function
    onInit: function() {
        valueOutput(this.$element[0]);
    },

    // Callback function
    onSlide: function(position, value) {
        console.log('onSlide');
        console.log('position: ' + position, 'value: ' + value);
    },

    // Callback function
    onSlideEnd: function(position, value) {
        console.log('onSlideEnd');
        console.log('position: ' + position, 'value: ' + value);
    }
});

我也调用了外部 rangeslider.js 页面，但它仍然说 $element.rangeslider 未定义。

【问题讨论】：

在调用它之前，您确定包含要加载的范围滑块代码吗？您能在包含脚本的地方显示更多代码吗？
我像这样附加我的脚本 -- $("head").append($("
当我在网络选项卡中控制所有文件加载的页面时，显示 rangeslider.js 被加载为 xhr 而不是脚本！ .我不知道为什么？提前致谢。
我认为您需要使用 getScript 加载脚本。
您没有加载脚本两次？

标签： javascript jquery html rangeslider

【解决方案1】：

试试这个解决方案，您将在其中等待脚本加载，然后调用您想要的功能。

$.getScript( "YourJS.js" )
  .done(function( script, textStatus ) {
         console.log( textStatus );
          //Preform here
        }) ;

工作示例。

init(1,10);
function init(min,max){
   $("#io").append($("<div style='text-align:center;'><div><input type='range' id='slider' min='" + min + "' max='" + max + "' step='1' value='3' data-rangeslider><output id='val'></output></div></div>"));
    $('head').append('<link href="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.2/rangeslider.css" rel="stylesheet" type="text/css">');
   $.getScript( "https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.2/rangeslider.js" )
       .done(function( script, textStatus ) {
         console.log( textStatus );
          //Preform here
          initRangeSlider($("#slider"));
        }) ;
}

function initRangeSlider(ele){
   ele.rangeslider({

    // Deactivate the feature detection
    polyfill: false,

    // Callback function
    onInit: function() {
        //valueOutput(this.$element[0]);
    },

    // Callback function
    onSlide: function(position, value) {
        console.log('onSlide');
        console.log('position: ' + position, 'value: ' + value);
    },

    // Callback function
    onSlideEnd: function(position, value) {
        console.log('onSlideEnd');
        console.log('position: ' + position, 'value: ' + value);
    }
   });

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='io'></div>

【讨论】：

我的 js 文件已加载但仍然相同的错误 $element.rangeslider is not defined
可能有两个原因可能会导致此错误。 1、你是在脚本加载后调用脚本吗？ 2. 您可能在父级而不是 iFrame 中加载脚本。
这是我的 div $(this).append($("

"));在此之后我调用我的脚本。