javascript - 动态添加新的 jQuery 滑块会导致旧滑块无法正常工作。

Question

这是我的代码：

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

每个新滑块都有效，但是当我添加另一个滑块时，以前的滑块不再起作用。即使每个滑块的所有内容都是独一无二的，它也会导致它不再可拖动。有谁知道这个问题的解决方案？

Answer 1

通过更新innerHTML，您基本上可以让浏览器从头开始重建您的 DOM。改为使用appendChild，这将保留附加到现有元素的事件处理程序和数据。

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

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

...因为您已经使用 jQuery。另外，我建议也重写 assigner 块：您不需要遍历 DOM 来寻找创建的元素（带有$(newsG)），因为您可以这样写：

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