Jquery 动态添加时，克隆的UI滑块元素会导致错误

我使用以下脚本，以使多个jQuery UI滑块组合在一起：

现在，我想从页面加载上的一个滑块开始，单击按钮后，我想添加另一个应该包含在计算中的滑块。但不幸的是，在我的方法中，当我添加一个新的滑块时，第一个滑块得到值

NaN

，当我尝试移动它时，我得到以下错误

uncaughttypeerror:无法读取未定义的属性'addClass'

当我从一开始就包含多个滑块（通过PHP）时，它可以正常工作

以下是html结构：

<div class="form-group taskType">
     <label for="TaskType32" class="col-sm-4 control-label">Aufgaben Art</label>
           <div class="col-sm-8">
              <select class="form-control" id="TaskType32" name="type[]">
                  <optgroup label="DESIGN">
                      <option value="photoshop">PHOTOSHOP</option>
                      <option value="recherche">RECHERCHE</option>
                   </optgroup>
             </select>
             <div class="rangeSliderContainer">
                 <div class="slider">100</div>
                 <span class="value">100</span>%
             </div>
             <input type="hidden" class="hiddenPercentage" name="percentage[]" value="100">
        </div>
</div>

2.）然后初始化滑块函数

manageSliders();

function manageSliders() {
    var sliders = $(".rangeSliderContainer .slider");
    var availableTotal = 100;

    sliders.each(function() {
        var init_value = parseInt($(this).text());

        $(this).siblings('.value').text(init_value);

        $(this).empty().slider({
            value: init_value,
            min: 0,
            max: availableTotal,
            range: "max",
            step: 2,
            animate: 0,
            slide: function(event, ui) {

                // Update display to current value
                $(this).siblings('.value').text(ui.value);
                $(this).parent().next('.hiddenPercentage').val(ui.value);

                // Get current total
                var total = 0;

                sliders.not(this).each(function() {
                    total += $(this).slider("option", "value");
                });

                // Need to do this because apparently jQ UI
                // does not update value until this event completes
                total += ui.value;

                var delta = availableTotal - total;

                // Update each slider
                sliders.not(this).each(function() {
                    var t = $(this),
                        value = t.slider("option", "value");

                    var new_value = value + (delta/2);

                    if (new_value < 0 || ui.value == 100)
                        new_value = 0;
                    if (new_value > 100)
                        new_value = 100;

                    t.siblings('.value').text(new_value);
                    t.slider('value', new_value);
                    t.parent().next('.hiddenPercentage').val(new_value);
                });
            }
        });
    });
}

因此，在调用最后一个
manageSliders（）之后，问题就出现了在
addSlider（）函数中。但我不知道如何将新添加的滑块包含到总计算中


如果您需要更多信息，请随时询问。谢谢大家!
 问题在于初始化滑块的代码。您可以从现有滑块提取文本值，但该滑块的DOM已更改，因此您可以获得NAN值

我所做的主要改变是：

我还将克隆更改为使用克隆的克隆，以消除重用元素的问题：

function addSlider() {
    var clone = clonedTaskAdd.clone();
    clone.find('.slider, .value').text('0');
    // clonedTaskAdd.find('.slider').text('0');
    clone.find('.hiddenPercentage').val('0');
    var rand = makeid();
    clone.find('label').attr('for', rand);
    clone.find('select').attr('id', rand);
    clone.find('.slider').slider();
    $('.createfinishedTask .taskType').last().after(clone);
    // $('.createfinishedTask .taskType').last().find('.slider').slider();
    manageSliders();
}

其他一些小的调整是，我开始添加临时变量而不是重新查询元素，并使用
~
而不是
parseInt
（更快、更短的整数截断）。
最初的观察结果是，您正在用id克隆元素（例如
id=“TaskType32”
）。ID在页面上必须是唯一的（jQuery将只找到第一个）。您需要修改正在克隆的HTML以符合此规则。@TrueBlueAusie谢谢您的回答，但这不是问题所在。即使我删除了ID，问题仍然存在。这只是一个观察，不是为了回答主要问题。有这么多的代码，可能会出现多个问题，您真的应该将它们全部放在一个JSFIDLE中：）Q：您是否要为每个副本克隆克隆克隆？否则，在后续的
调用之后，您将移动原始克隆元素。不，我不会为每个副本克隆它。我只是在文档准备就绪时克隆它一次。问题已经从第一个动态添加的元素开始。是的，我知道很难找到有这么多代码的东西，我只是想可能是我丢失的东西。我现在没有太多时间，明天我将试着做一把小提琴。谢谢你的努力！非常感谢你！现在它可以工作了，但不幸的是，更新的计算结果有时是错误的。只需摆弄你的小提琴，添加更多的滑块并随机移动它们，看看不同的数字，有时超过100，有时低于100。。尽管如此，我还是接受了你的回答，因为它回答了我原来的问题。但是，如果你有时间和空间，请随意查看。你似乎和我一样对JS有更多的经验……）再次感谢您的帮助和详细的回答。是的，看起来像整数舍入问题。您能解释一下当滑块值发生变化时，分配滑块值的算法是什么吗？每次移动滑块时都会出现舍入错误（
+/-n
，其中
n
是滑块的数量），因此错误会随着使用而增加。您需要限制这些值，但我需要先了解您的算法，然后才能提出建议：）它在
manageSliders（）函数中。正如我在问题中所说，我从这个答案中得到了大部分代码：啊。。。所以基本上你也不知道它是怎么工作的：）我会调查一下，等我有机会放松一下，好好想想。逆向工程他人的javascript可能会很痛苦：>
$('.createfinishedTask').on('click', '.rangeTrigger', function(e) {
        e.preventDefault();
        addSlider();
    });


function addSlider() {
    clonedTaskAdd.find('.slider, .value').text('0');
    clonedTaskAdd.find('.hiddenPercentage').val('0');
    clonedTaskAdd.find('.slider').slider();
    $('.createfinishedTask .taskType').last().after(clonedTaskAdd);
    manageSliders();
}

    // This value comes from the text element, but only if not converted to a slider
    if ($this.find('.ui-slider-handle').length) {
        var init_value = $this.slider("option", "value");
    } else {
        var init_value = ~~$this.text();
    }

function addSlider() {
    var clone = clonedTaskAdd.clone();
    clone.find('.slider, .value').text('0');
    // clonedTaskAdd.find('.slider').text('0');
    clone.find('.hiddenPercentage').val('0');
    var rand = makeid();
    clone.find('label').attr('for', rand);
    clone.find('select').attr('id', rand);
    clone.find('.slider').slider();
    $('.createfinishedTask .taskType').last().after(clone);
    // $('.createfinishedTask .taskType').last().find('.slider').slider();
    manageSliders();
}