Динамически создавать элементы плагина javascript

Question

Я пытаюсь динамически добавить bootstrap-slider на мою веб-страницу. Однако добавленный слайдер по какой-то причине не получает инициализацию.

Следующая jsfiddle демонстрирует мою проблему: https://jsfiddle.net/hLrptave/1/

У меня 2 ползунки: один в настоящее время проживающих на странице (и это работает правильно) и тот, который динамически созданный JavaScript при нажатии на кнопку. Два ползунка точно такие же, но динамически созданный не работает (он выглядит как обычный ввод текста).

Ползунки инициализируются JQuery (или JavaScript), и оба имеют следующий код:

<input type="text" class="slider" data-slider-min="0" data-slider-max="10" data-slider-value="5"> 

Так что мой вопрос, как я могу инициализировать то, что не существует на странице еще?

Имейте в виду, что у меня есть много этих кнопок на моей веб-странице. Не уверен, что это влияет на что-либо или нет.

Answer 1

Просто добавьте

$('.slider').slider(); 

после

$('#box').append(slider2); 

Я бы посоветовал вам изменить имя класса нового бегунка Slider1 beacuse при создании на новый предыдущий восходит к середине, если они имеют один и тот же Classname

JSFIDDLE

Answer 2

После того, как вы добавили новый слайдер, инициализировать его напрямую:

$('.slider').slider(); // Initialize pre-existing sliders 
 
$('#button').click(function(){ 
 
    var $last = $('.slider').last(); 
 
    $last = $('<br>').insertAfter($last); 
 
    $('<input>') 
 
    .addClass('slider') 
 
    .attr('type', 'text') 
 
    .insertAfter($last) 
 
    .slider({ // Initialize this newly created slider 
 
     min: 0, 
 
     max: 10, 
 
     value: 5 
 
    }); 
 
});

<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.7.1/css/bootstrap-slider.css" rel="stylesheet"> 
 
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.7.1/bootstrap-slider.js"></script> 
 
<input type="text" class="slider" data-slider-min="0" data-slider-max="10" data-slider-value="5"> 
 
<div id="box"> 
 
    <button id="button">Add Slider</button> 
 
</div>