Как загрузить ползунок Bootstrap на основе события клика (JavaScript-код innerHTML)

Question

function createslider(){
document.getElementById("loadSlider").innerHTML='<input id="ex1" data-slider-id="ex1Slider" type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="14"/>';
}


// Without JQuery
var slider = new Slider('#ex1', {
 formatter: function(value) {
  return 'Current value: ' + value;
 }
});

#ex1Slider .slider-selection {
 background: #BABABA;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.9.0/css/bootstrap-slider.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.9.0/bootstrap-slider.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.9.0/bootstrap-slider.js"></script>


<button onclick="createslider()"> Click me</button>


<div id="loadSlider">
<!--
<input id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="14"/>-->

</div>

Проблема: Bootstrap Slider не отображается при клике события JavaScript

Объясните: если я показываю HTML-код слайдера (без события onlclick), он работает нормально, но когда я загружаю базу на кнопке onlclick, слайдер не отображается, отображается только поле ввода

Answer 1

Ваш javascript имеет один серьезный недостаток:

var slider = new Slider('#ex1', {
    formatter: function(value) {
        return 'Current value: ' + value;
    }
});

ничего в вашем коде не вызывает этого, страница попытается запустить JS перед элементом с идентификатором #ex1 существует, потому что он будет работать при загрузке страницы. Как только вы сделаете событие щелчка, ничто не скажет ему связать ползунок с ним. Вам нужно использовать обратный звонок. Попробуйте приведенный ниже JavaScript.

function createslider(){
document.getElementById("loadSlider").innerHTML='<input id="ex1" data-slider-id="ex1Slider" type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="14"/>';
addNewSlider(); // let the callback attach the new slider once the new node has been added to the dom
}


// Without JQuery
function addNewSlider() { // callback at work
var slider = new Slider('#ex1', {
    formatter: function(value) {
        return 'Current value: ' + value;
    }
});
}