javascript - jQuery slider : only last slider working on page with multiple sliders

Question

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

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

我不确定这里出了什么问题。所有 slider 的 id 都是唯一的，我在 html 存在后创建 slider 。有人知道发生了什么事吗？谢谢!在 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。在每次循环迭代中，您:

1. 创建 2 个新 div，
2. 替换 <div id="sliders"> 内部html
3. 然后初始化新 div 上的 jquery-ui slider 。

问题出在步骤 2 中。因为您正在替换内部 html(您正在替换 DOM 元素)，所以 jquery-ui 绑定(bind)的所有事件都会在下一次循环迭代中丢失。因此，只有在上次迭代时初始化的 slider 才有效。

看看 this jsFiddle 其中 jQuery .append() 使用函数代替innerHTML:

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

与 .append()您只向 DOM 添加新元素，而不是替换 <div id="sliders"> 中的所有现有元素。