Dojo HorizontalSliders 在后续实例化时失去功能

Question

我的代码是一个 for 循环，它创建了 5 个唯一的 HorizontalSliders:

for(var i = 0; i < 5; i++){
    dom.byId('ui').innerHTML += '<div id="slider_' + i + '"></div>';
    var slider = new HorizontalSlider({
        value: 100,
        minimum: 0,
        maximum: 100,
        style: 'width:300px;'
    }, 'slider_' + i);
    slider.startup();
}

但是，只有最后创建的HorizontalSlider 功能正常。

其他的HorizontalSliders连滑动都不会，更不用说我给它一个onChange事件了。

为什么会这样？

Answer 1

更新：

我弄错了问题的根源，所以我更改了 'why' 部分答案，但我会在这里留下代码，因为它可以解决问题。

require([
    "dijit/form/HorizontalSlider",
    "dojo/dom",
    "dojo/domReady!"
], function (
  HorizontalSlider, 
  dom
){

  var sliders = [1, 2, 3, 4, 5]

  var getSlider = function(i) {
    return new HorizontalSlider({
                value: 100,
                minimum: 0,
                maximum: 100,
                style: 'width:300px;'
            });
  }

  var placeAndStart = function (s) {
    s.placeAt('ui');
    s.startup();
  }

  sliders.map(getSlider).forEach(placeAndStart)

});

Js Fiddle example

Answer 2

dojo 中的所有 dijit 都有一个 placeAt(domnonde) 方法，您可以在每个实例化的滑块上直接使用该方法。（placeAt 接受参数中的 domeNode 或字符串 id）请参阅下面的工作片段：

require([
  "dijit/form/HorizontalSlider",
], function(
  HorizontalSlider
) {

  for (var i = 0; i < 5; i++) {
    
    var slider = new HorizontalSlider({
      value: 100,
      minimum: 0,
      maximum: 100,
      style: 'width:300px;'
    }).placeAt("ui");
    slider.startup();
  }

});

<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<link href="//ajax.googleapis.com/ajax/libs/dojo/1.10.0/dijit/themes/claro/claro.css" rel="stylesheet" />

<body class="claro">
  <div id="ui"></div>
</body>

Dojo HorizontalSliders 在后续实例化时失去功能

Dojo HorizontalSliders lose functionality upon subsequent instantiation

dojo

slider

dijit.form

Dojo Horizo​​ntalSliders 在后续实例化时失去功能

Dojo HorizontalSliders lose functionality upon subsequent instantiation

dojo

slider

dijit.form

Dojo HorizontalSliders 在后续实例化时失去功能