动态添加一个新的jQuery滑块会导致旧的滑块不起作用

Dynamically adding a new jQuery slider causes the older sliders to not function.

本文关键字：添加 不起作用 jQuery 一个 动态      更新时间：2023-09-26

这是我的代码:

    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'));
相关文章：