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。另外，我建议你重写一下这个分配器块：你不需要遍历那个寻找那个创建元素的DOM（$(newsG)），你可以这样写：

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

动态添加新的jQuery滑块会导致旧的滑块无法运行。

1 个答案: