如何使克隆的微调器控制正确的输入？

Question

我正在尝试动态更改jQuery UI Spinners的数量。 我没有问题删除它们，但是当添加一个新的时，我正在做的是克隆第一个并将其附加到末尾，如下所示：

function clone_elem() {
    $("#num_people").append($(".num_people").first().clone(true, true));
}

一切似乎都正常运行，但是克隆的微调器元素控制原始微调器文本值，而不是克隆的微调器文本值。 如何使克隆的微调框控制正确的输入框？ 也许我应该为此使用clone（）以外的东西？

这是我的jsFiddle，因此您可以了解我的意思。

Answer 1

克隆的元素事件仍指向第一个元素。

它具有创建新的微调器元素的功能。

http://jsfiddle.net/XuvmR/9/

function clone_elem() {
    $("#num_people").append(makespinner());
    if ($('.spinner').length > 0) {
        $('.spinner').spinner({
            min: 0,
            max: 100,
            stop: function (event, ui) {
                // Apply the JS when the value is changed
                if (typeof $(this).get(0).onkeyup == "function") {
                    $(this).get(0).onkeyup.apply($(this).get(0));
                }
                if (typeof $(this).get(0).onchange == "function") {
                    $(this).get(0).onchange.apply($(this).get(0));
                }
            }
        });
    }
}

function makespinner() {
    if (typeof g === 'undefined') {
        g = {};
    }
    if (typeof g.uniqueID === 'undefined') {
        g.uniqueID = 2;
    }
    var base = $('<div class="num_people">');
    var held = $('<p class="spinner_p">');
    held.appendTo(base);
    var nextID = g.uniqueID++;
    $('<label for="' + "num_adults_" + nextID + '" class="label required">Number of people: </label>').appendTo(held);
    $('<input id="' + "num_adults_" + nextID + '" type="text" name="' + "num_adults_" + nextID + '" value="2" class="spinner" />').appendTo(held);
    return base;
}

Answer 2

为了使用微调器克隆元素，您想要做的是删除旧的微调器，克隆元素，然后重新添加微调器：

$(document).ready(function () {
    make_spinners();
    clone_elem();
});

function clone_elem() {
    kill_spinners();
    $("#num_people").append($(".num_people").first().clone(true, true));
    make_spinners();
}

function kill_spinners() {
    $('.spinner').spinner( "destroy" );
}

function make_spinners() {
    if ($('.spinner').length > 0) {
        $('.spinner').spinner({
            min: 0,
            max: 100,
            stop: function (event, ui) {
                // Apply the JS when the value is changed
                if (typeof $(this).get(0).onkeyup == "function") {
                    $(this).get(0).onkeyup.apply($(this).get(0));
                }
                if (typeof $(this).get(0).onchange == "function") {
                    $(this).get(0).onchange.apply($(this).get(0));
                }
            }
        });
    }
}

它在jsFiddle上 。

编辑：

请注意，如果要动态添加和删除微调器，例如，在相当不错的PC上从49个微调器变为50个微调器实际上可能需要3-4秒。 除了销毁所有旧的微调器，您还可以销毁要克隆的对象上的微调器，这将大大加快处理速度（大约需要300毫秒）。 实际的对象复制几乎是瞬时的。 需要很长时间才能重新应用所有微调器。 这就是我现在在生产脚本中正在做的事情：

// Destroy spinner on object to be cloned
$elem.find('.spinner').spinner( "destroy" );

var $clone;

// Add new clone(s)
while (cur_number < desired_number) {
    $clone = $elem.clone(false, true);
    $("#where_to_put_it").append($clone);

    // Increment IDs
    $clone.find("*").each(function() {
        var id = this.id || "";
        var match = id.match(/^(.*)(\d)+$/i) || [];
        if (match.length == 3) {
            this.id = match[1] + (cur_rooms + 1);
        }
    });

    cur_number++;
}

// Re-apply the spinner thingy to all objects that don't have it
$('.spinner').spinner({
    min: 0,
    max: 100,
    stop: function (event, ui) {
        // Apply the JS when the value is changed
        if (typeof $(this).get(0).onkeyup == "function") {
            $(this).get(0).onkeyup.apply($(this).get(0));
        }
        if (typeof $(this).get(0).onchange == "function") {
            $(this).get(0).onchange.apply($(this).get(0));
        }
    }
});