jQuery 动态生成范围滑块答案

【问题标题】：jQuery dynamically generated rangesliderjQuery 动态生成范围滑块
【发布时间】：2019-04-18 09:29:57
【问题描述】：

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

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

现在我想在动态生成滑块时进行这项工作。我找到的有关如何执行此操作的大多数信息都是关于按钮的，如下所示：

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

所以当我尝试使用这样的滑块进行此操作时：

$('#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
        }
    });
});

现在这个方法有一个例外。当页面页面/应用程序加载时，滑块没有任何 CSS，并且看起来就像普通的 HTML 滑块，直到我单击其中一个。这是合乎逻辑的，因为.rangeslider({...})（添加了 CSS）在“更改”事件触发之前不会发生。那么我将如何解决这个问题。我用.ready() 和 DOMNodeInserted 尝试了各种方法来在加载滑块时触发.rangeslider()，但似乎都不起作用。我还发现了一些关于MutationObserver() 的信息，但我不太了解如何使用它（在我的代码中）。

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

谢谢，

【问题讨论】：

标签： javascript jquery html dynamic rangeslider

【解决方案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 之后。谢谢，

【讨论】：