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

2023年10月16日 207次阅读

这是我的代码：

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

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

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

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

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

…因为你已经使用了jQuery.另外,我建议重写分配器块：你不需要遍历DOM来寻找那个创建的元素(使用$(newsG)),因为你可以这样写：

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