动态创建 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，因为当您创建新滑块时，如果它们具有相同的类名，则前一个滑块会回到中间

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>

动态创建 javascript 个插件元素

Dynamically create javascript plugin elements

html

javascript

jquery

bootstrap-slider