JQuery динамически сгенерированный Rangelider - PullRequest
Новая
       7

JQuery динамически сгенерированный Rangelider

0 голосов
/ 15 ноября 2018

Для школьного задания я пишу приложение Cordova. У меня есть несколько динамически генерируемых ползунков, для которых я использую rangelsider.js . Обычный код для использования Rangelider: 

$('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) не происходит до тех пор, пока не сработает событие «change». Так как бы это исправить? Я пробовал разные вещи с .ready() и DOMNodeInserted, чтобы вызвать .rangeslider(), когда ползунки загружены, но ни одна из них не работает. Я также нашел кое-что о MutationObserver(), но я не очень понимаю, как его использовать (в моем коде).

Отказ от ответственности Я очень плохо разбираюсь в JavaScript / jQuery, поэтому приведите пример, если вы знаете решение.

Спасибо

1 Ответ

0 голосов
/ 15 ноября 2018 
$(document).ready(function() {
$('input[type="range"]').rangeslider({
    polyfill: false,
    onInit: function () {
        //do stuff
    },
    onSlideEnd: function () {
        console.log(this.id);
    },
    onSlide: function () {
        do stuff
    }
});

});

Пожалуйста, убедитесь, что этот код находится после загрузки jquery и rangelider.js.Спасибо,

...