动态添加时克隆的 UI Slider 元素会导致错误

Question

我使用以下脚本来拥有多个 jQuery UI 滑块，它们的总和是：Combined total for multiple jQuery-UI Sliders

现在我想在页面加载时从一个滑块开始，单击按钮后我想添加另一个应该包含在计算中的滑块。但不幸的是，在我的方法中，当我添加一个新滑块时，第一个滑块的值是NaN，当我尝试移动它时，我收到以下错误Uncaught TypeError: Cannot read property 'addClass' of undefined。

当我从一开始就包含多个滑块时（通过 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>

这是我的方法：

1.) 我先克隆元素

clonedTaskAdd = $('.createfinishedTask .taskType').clone();

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

3.) 在按钮单击时，我更改克隆的值并附加它

$('.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();
}

所以问题发生在我在addSlider() 函数中调用最后一个manageSliders(); 之后。但我不知道如何将新添加的滑块包含在总计算中。

FIDDLE

如果您需要更多信息，请随时询问。谢谢！

Answer 1

问题在于初始化滑块的代码。您从现有滑块中提取了一个文本值，但该滑块的 DOM 已更改，因此您获得了一个 NAN 值。

我所做的主要更改是：http://jsfiddle.net/TrueBlueAussie/p5ty5wbv/3/

    // 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();
}

其他小的调整是我开始添加临时变量而不是重新查询元素以及使用 ~~ 而不是 parseInt（更快和更短的整数截断）。