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

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

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

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

---

HTML：

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 = '
Slider '+i+'
' +'
'; 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. 替换

   内部html

3. 然后初始化新div上的jquery-ui滑块。

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

看看这个使用 jQuery .append()函数而不是innerHTML的jsFiddle ：

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

使用.append()您只需向DOM添加新元素，而不是替换

中的所有现有元素