Javascript 动态添加新的jQuery滑块会导致旧的滑块无法工作。

这是我的代码：

    newS = "#newS_"+g; //g is a unique number from an id
    document.getElementById('finderScroll').innerHTML +='<div id="newS_'+g+'"></div>'
       $(newS).slider({
              range: true,
              min: 0,
              max: 500,
              values: [ 75, 300 ],
              slide: function( event, ui ) {
              console.log( ui.values[ 0 ] + ui.values[ 1 ] );
                 }
              });

newS=“#新闻”+g//g是id中唯一的数字
document.getElementById（'finderScroll'）。innerHTML+=''
$（新闻）.滑块({
范围：对，
分:0,，
最高：500，
数值：[75300]，
幻灯片：功能（事件、用户界面）{
console.log（ui.values[0]+ui.values[1]）；
}
});

---

每个新滑块都可以工作，但当我添加另一个滑块时，以前的滑块将不再工作。它使它不再是可拖动的，即使每个滑块的所有内容都是唯一的。有人知道这个问题的解决方案吗？

通过更新

innerHTML

基本上可以让浏览器从头开始重建DOM。改为使用

appendChild

，这将保留附加到现有元素的事件处理程序和数据

事实上，我不明白你为什么不能这样写：

$('#finderScroll').append($('<div>').attr('id', 'newS_' + g));

---

如果您发布一个jsfiddle，这将有所帮助。代码太多，无法添加JSFIDLE。它正在导入JSON并拖放以初始化新滑块。我可以制作一个小模型。这样效率更高，但问题仍然存在。不过，我有一些旧代码仍在添加到innerHTML中。我把它取下来，然后一切都好了。酷，谢谢！没关系。）刚刚完成了演示此方法的演示。

$('<div>').attr('id', 'news_' + g).slider({ ... })
    .appendTo($('#finderScroll'));