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如果它们具有相同的类名，则前一个滑块返回到中间

JSFIDDLE

Answer 2

添加新滑块后，请直接初始化：

＆＃13;

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

＆＃13;

<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>

＆＃13;

动态创建javascript插件元素

2 个答案: