1

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

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

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

这是我的 jsFiddle，所以你可以明白我的意思。

4

2 回答 2

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;
}
于 2013-07-09T00:11:24.690 回答
1

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

$(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));
        }
    }
});
于 2013-07-09T01:44:29.307 回答