javascript - 如何让克隆的微调器控制正确的输入？

Question

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

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

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

Here's my 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;
}