Javascript 引导滑块在使用dom时不起作用

我想动态创建引导滑块，所以我决定使用dom创建一个

现在我的js代码如下：

  const newItem = document.createElement('input');
  newItem.setAttribute('id', 'slider');
  newItem.setAttribute('type', 'text');
  newItem.setAttribute('data-provide', 'slider');
  newItem.setAttribute('data-slider-min', '1');
  newItem.setAttribute('data-slider-max', '3');
  newItem.setAttribute('data-slider-step', '1');
  newItem.setAttribute('data-slider-value', '1');
  newItem.setAttribute('data-slider-tooltip', 'hide');

<input id="slider" type="text" data-provide="slider" data-slider-min="1" data-slider-max="3" data-slider-step="1" data-slider-value="1" data-slider-tooltip="hide">

    <input
        type="text"
        data-provide="slider"
        data-slider-min="1"
        data-slider-max="3"
        data-slider-step="1"
        data-slider-value="3"
        data-slider-tooltip="hide"
    >

// Create an input element dynamically
var newItem = document.createElement('input');

const body = document.querySelector('body');
// Add your new created element to body (or any other div)
body.appendChild(newItem);

// Instantiate a slider
var mySlider = new Slider(newItem, {
   // initial options object
   step: 1,    
   min: 1,
   max:3,
   value: 1,
   tooltip: 'hide'
 });

但它只显示一个文本框，我使用Chrome dev工具检查元素，它看起来像这样：

  const newItem = document.createElement('input');
  newItem.setAttribute('id', 'slider');
  newItem.setAttribute('type', 'text');
  newItem.setAttribute('data-provide', 'slider');
  newItem.setAttribute('data-slider-min', '1');
  newItem.setAttribute('data-slider-max', '3');
  newItem.setAttribute('data-slider-step', '1');
  newItem.setAttribute('data-slider-value', '1');
  newItem.setAttribute('data-slider-tooltip', 'hide');

<input id="slider" type="text" data-provide="slider" data-slider-min="1" data-slider-max="3" data-slider-step="1" data-slider-value="1" data-slider-tooltip="hide">

    <input
        type="text"
        data-provide="slider"
        data-slider-min="1"
        data-slider-max="3"
        data-slider-step="1"
        data-slider-value="3"
        data-slider-tooltip="hide"
    >

// Create an input element dynamically
var newItem = document.createElement('input');

const body = document.querySelector('body');
// Add your new created element to body (or any other div)
body.appendChild(newItem);

// Instantiate a slider
var mySlider = new Slider(newItem, {
   // initial options object
   step: 1,    
   min: 1,
   max:3,
   value: 1,
   tooltip: 'hide'
 });

我的配置似乎正确，因为我使用html成功创建了一个滑块，如下所示：

  const newItem = document.createElement('input');
  newItem.setAttribute('id', 'slider');
  newItem.setAttribute('type', 'text');
  newItem.setAttribute('data-provide', 'slider');
  newItem.setAttribute('data-slider-min', '1');
  newItem.setAttribute('data-slider-max', '3');
  newItem.setAttribute('data-slider-step', '1');
  newItem.setAttribute('data-slider-value', '1');
  newItem.setAttribute('data-slider-tooltip', 'hide');

<input id="slider" type="text" data-provide="slider" data-slider-min="1" data-slider-max="3" data-slider-step="1" data-slider-value="1" data-slider-tooltip="hide">

    <input
        type="text"
        data-provide="slider"
        data-slider-min="1"
        data-slider-max="3"
        data-slider-step="1"
        data-slider-value="3"
        data-slider-tooltip="hide"
    >

// Create an input element dynamically
var newItem = document.createElement('input');

const body = document.querySelector('body');
// Add your new created element to body (or any other div)
body.appendChild(newItem);

// Instantiate a slider
var mySlider = new Slider(newItem, {
   // initial options object
   step: 1,    
   min: 1,
   max:3,
   value: 1,
   tooltip: 'hide'
 });

年，它说：

使用“数据提供=滑块”属性创建输入元素 自动将其转换为滑块

因此，问题似乎是引导滑块没有解释我的属性。

$function{ var newItem=document.createElement'input'； setAttribute'id'，'slider'； setAttribute'type'，'text'； setAttribute'data-provide'，'slider'； setAttribute'data-slider-min'，'1'； setAttribute'data-slider-max'，'3'； setAttribute'data-slider-step'，'1'； setAttribute'data-slider-value'，'1'； setAttribute'data-slider-tooltip'，'hide'； document.body.appendChildnewItem； $newItem.slider； }; 正文{padding:10px；} $function{ var newItem=document.createElement'input'； setAttribute'id'，'slider'； setAttribute'type'，'text'； setAttribute'data-provide'，'slider'； setAttribute'data-slider-min'，'1'； setAttribute'data-slider-max'，'3'； setAttribute'data-slider-step'，'1'； setAttribute'data-slider-value'，'1'； setAttribute'data-slider-tooltip'，'hide'； document.body.appendChildnewItem； $newItem.slider； }; 正文{padding:10px；}

---

如果不使用jQuery，我想您需要初始化滑块，如下所示：

// Instantiate a slider
var mySlider = new Slider(newItem, {
   // initial options object
   step: 1,    
   min: 1,
   max:3,
   value: 1,
   tooltip: 'hide'
});

因此，在您的情况下，如果您还想构建一个动态输入，然后在其上附加一个滑块，那么您的整个代码如下所示：

  const newItem = document.createElement('input');
  newItem.setAttribute('id', 'slider');
  newItem.setAttribute('type', 'text');
  newItem.setAttribute('data-provide', 'slider');
  newItem.setAttribute('data-slider-min', '1');
  newItem.setAttribute('data-slider-max', '3');
  newItem.setAttribute('data-slider-step', '1');
  newItem.setAttribute('data-slider-value', '1');
  newItem.setAttribute('data-slider-tooltip', 'hide');

<input id="slider" type="text" data-provide="slider" data-slider-min="1" data-slider-max="3" data-slider-step="1" data-slider-value="1" data-slider-tooltip="hide">

    <input
        type="text"
        data-provide="slider"
        data-slider-min="1"
        data-slider-max="3"
        data-slider-step="1"
        data-slider-value="3"
        data-slider-tooltip="hide"
    >

// Create an input element dynamically
var newItem = document.createElement('input');

const body = document.querySelector('body');
// Add your new created element to body (or any other div)
body.appendChild(newItem);

// Instantiate a slider
var mySlider = new Slider(newItem, {
   // initial options object
   step: 1,    
   min: 1,
   max:3,
   value: 1,
   tooltip: 'hide'
 });

---

在这里，我为您构建了一个实时演示：

如果您不使用jQuery，我想您需要初始化滑块，如下所示：

// Instantiate a slider
var mySlider = new Slider(newItem, {
   // initial options object
   step: 1,    
   min: 1,
   max:3,
   value: 1,
   tooltip: 'hide'
});

因此，在您的情况下，如果您还想构建一个动态输入，然后在其上附加一个滑块，那么您的整个代码如下所示：

  const newItem = document.createElement('input');
  newItem.setAttribute('id', 'slider');
  newItem.setAttribute('type', 'text');
  newItem.setAttribute('data-provide', 'slider');
  newItem.setAttribute('data-slider-min', '1');
  newItem.setAttribute('data-slider-max', '3');
  newItem.setAttribute('data-slider-step', '1');
  newItem.setAttribute('data-slider-value', '1');
  newItem.setAttribute('data-slider-tooltip', 'hide');

<input id="slider" type="text" data-provide="slider" data-slider-min="1" data-slider-max="3" data-slider-step="1" data-slider-value="1" data-slider-tooltip="hide">

    <input
        type="text"
        data-provide="slider"
        data-slider-min="1"
        data-slider-max="3"
        data-slider-step="1"
        data-slider-value="3"
        data-slider-tooltip="hide"
    >

// Create an input element dynamically
var newItem = document.createElement('input');

const body = document.querySelector('body');
// Add your new created element to body (or any other div)
body.appendChild(newItem);

// Instantiate a slider
var mySlider = new Slider(newItem, {
   // initial options object
   step: 1,    
   min: 1,
   max:3,
   value: 1,
   tooltip: 'hide'
 });

在这里，我为您制作了一个现场演示：