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

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。

修改

请注意，如果你动态添加和删除微调器，例如，从49个微调旋转器到50个旋转器，实际上可以在相当不错的PC上花费3-4秒。您可以直接销毁正在克隆的对象上的微调器，而不是销毁旧旋转器的所有，这将显着加快速度（需要~300 ms）。实际的对象重复几乎是瞬间完成的;需要很长时间的是重新应用所有的微调器。所以这就是我现在在生产脚本中所做的事情：

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

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

2 个答案: