javascript - 动态添加新的 jQuery slider 会导致旧 slider 无法运行。

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

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

Answer 1

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

其实我不明白为什么不能这样写:

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

... 因为您已经在使用 jQuery。另外，我建议也重写分配器 block :您不需要遍历 DOM 来寻找创建的元素(使用 $(newsG))，因为您可以这样写:

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