Question

我正在制作一个包含多个滑块的页面，其中滑块的数量和选项因用户而异。我遇到了创建和显示所有滑块的问题，但只有最后一个滑块可以拖动。

简单的jsfiddle来演示我在说什么：http://jsfiddle.net/2crev/3/

我不确定这里的问题是什么。所有滑块的ID都是唯一的，我在html之后创建了滑块。有谁知道发生了什么？谢谢！在FF 26，Chrome 31，IE 11上遇到问题。

HTML：

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

CSS：

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);

Answer 1

问题是你在每次循环迭代中替换内部html。在每次循环迭代中，您：

创建2个新div，
替换 <div id="sliders"> 内部HTML
然后初始化新div上的jquery-ui滑块。

问题出在第2步。因为你要替换内部html（你正在替换DOM元素），所以jquery-ui绑定的所有事件在下一次循环迭代时都会丢失。因此，仅在最后一次迭代时初始化的滑块起作用。

查看 this jsFiddle ，其中使用了jQuery .append()函数而不是innerHTML：

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

使用.append()，您只需向DOM添加新元素，而不是替换<div id="sliders">

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

1 个答案: