javascript - jQuery 动态生成范围 slider

Question

对于学校作业，我正在编写一个 Cordova 应用程序。我有一堆动态生成的 slider ，我使用 rangelsider.js 。使用范围 slider 的正常代码是这样的:

$('input[type="range"]').rangeslider({
    polyfill: false,
    onInit: function () {
        //Do stuff
    },
    onSlideEnd: function () {
        console.log("slider id: " +this.id);
    },
    onSlide: function () {
        //Do stuff
    }
});

现在我想在动态生成 slider 时使其工作。我找到的关于如何执行此操作的大多数信息都是关于按钮的，如下所示:

$(document).on("click", ".button", function(){ //do stuff });

因此，当我尝试使用 slider 执行此操作时，如下所示:

$('#sliders').on("change", '.rangeslider', function () {
    $('input[type="range"]').rangeslider({
        polyfill: false,
        onInit: function () {
            //do stuff
        },
        onSlideEnd: function () {
            console.log(this.id);
        },
        onSlide: function () {
            do stuff
        }
    });
});

现在这可以工作，但有一个异常(exception)。当页面/应用程序加载时， slider 没有任何 CSS，看起来就像普通的 HTML slider ，直到我单击其中之一。这是合乎逻辑的，因为 .rangeslider({...}) (添加 CSS)在“change”事件触发之前不会发生。那么我该如何解决这个问题。我尝试使用 .ready() 和 DOMNodeInserted 进行各种操作，以在加载 slider 时触发 .rangeslider() 但似乎都不起作用。我还发现了一些关于 MutationObserver() 的内容，但我不太明白如何使用它(在我的代码中)。

免责声明我不擅长 JavaScript/jQuery，所以如果您知道解决方案，请举个例子。

谢谢

Answer 1

$(document).ready(function() {
$('input[type="range"]').rangeslider({
    polyfill: false,
    onInit: function () {
        //do stuff
    },
    onSlideEnd: function () {
        console.log(this.id);
    },
    onSlide: function () {
        do stuff
    }
});

});

请确保此代码是在加载jquery和rangeslider.js之后加载的。谢谢，