0

我正在尝试向我的网页动态添加引导滑块。但是，由于某种原因，添加的滑块没有被初始化。

以下 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">

所以我的问题是如何初始化页面上不存在的东西？

请记住，我的网页上有很多这些按钮。不确定这是否会影响任何事情。

4

2 回答 2

1

只需添加

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

后

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

我建议您将新滑块的类名更改为slider1，因为当您创建新滑块时，如果它们具有相同的类名，前一个滑块将返回中间

JSFIDDLE

于 2017-02-08T22:06:13.980 回答
1

添加新滑块后，直接对其进行初始化：

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

于 2017-02-08T23:07:49.970 回答