Javascript jQuery滑块：只有最后一个滑块使用多个滑块在页面上工作

我正在制作一个包含多个滑块的页面，其中滑块的数量和选项根据用户的不同而不同。我有一个问题，所有的滑块都被创建和显示，但只有最后一个滑块是可拖动的

简单的jsfiddle来演示我所说的内容：

我不确定这里有什么问题。所有滑块的ID都是唯一的，我在html出现后创建滑块。有人知道发生了什么吗？谢谢关于FF 26、Chrome 31、IE 11的问题

---

HTML:

<div id="sliders" style="width: 100px">
</div>

div.slider {
    margin-top: 5px;
    margin-bottom: 30px;
}

JS:

var numberOfSliders = Math.floor(Math.random()*5) + 2;

for (var i=0; i < numberOfSliders; i++) {
    // Insert HTML
    var html = '<div>Slider '+i+'</div>'
              +'<div class="slider" id="slider-'+i+'"></div>';
    document.getElementById('sliders').innerHTML += html;

    // Create Slider
    $('#slider-'+i).slider({
        value: Math.floor(Math.random()*10) + 1,
        min: 0,
        max: Math.floor(Math.random()*5) + 10,
        step: 1,
        orientation: "horizontal",
        range: "min",
        animate: true
    });
}

console.log(document.getElementById('sliders').innerHTML);

var numberOfSliders=Math.floor（Math.random（）*5）+2；
对于（变量i=0；i

问题在于，在每次循环迭代中都要替换内部html。 在每个循环迭代中，您将：

创建2个新div

替换内部html

然后在新div上初始化jqueryui滑块

问题在步骤2中。因为您正在替换内部html（您正在替换DOM元素），所以jQueryUI绑定的所有事件在下一次循环迭代中都会丢失。因此，只有在最后一次迭代中初始化的滑块才能工作

查看使用jQuery函数而不是innerHTML的情况：

$('#sliders').append(html);

---

使用

.append（）

只向DOM添加新元素，而不是替换

中的所有现有元素！真奇怪。我只是假设.innerHTML+=html与.append（）具有相同的效果。。我不知道它会破坏DOM中的东西。谢谢