jquery - 将统一的 js 重新应用到克隆的选择

Question

我正在克隆包含两个文本输入和一个选择选项的行。我正在使用Uniform插件来设置选择的样式。但是，克隆行后，将应用统一样式，但统一/选择本身不起作用。焦点仍保留在原始选择上，克隆选择的值不会更改。

您可以在这个 fiddle ( associated with this thread )中看到克隆的选择的确切问题: http://jsfiddle.net/broncha/WsFyV/34/ 。它们被克隆后，值永远不会改变。正如该 fiddle 中所见，该线程中提到的修复不起作用。

我用来克隆行的脚本是这样的，从 previous quesiton 进行调整:

$('.add-row').on('click', function(event) {

    function incrementProp(index, prop) {
        return prop.replace(/(\d+)/, function(fullMatch, n) {
            return Number(n) + 1;
        });
    }

    var cloneVar = $(this).parent().parent('.sortable');
    var cloneRow = $(cloneVar).find('.sort-group .row:last');
    var cloneIns;

    if (cloneVar.hasClass('before')) {
        cloneIns = $(cloneVar).find('.sort-group .row:first');
        insert = 'insertBefore';
    } else {
        cloneIns = $(cloneVar).find('.sort-group .row:last');
        insert = 'insertAfter';
    }

    cloneRow.clone(true)[insert](cloneIns)
    .addClass('add').removeClass('first')
    .find('input[type=text], textarea, select').val('').attr('name', incrementProp).end()
    .find('input, textarea, select, .selector').attr('id', incrementProp).end()
    .find('option:selected').removeAttr('selected').end()
    .find('.remove').removeClass('visible');

    return false;
});

在该脚本中，ID 和名称都按 .selector 类和 select 本身的预期递增。因此，选择的 ID/名称将类似于 clone_test[0][thomas_the_train]、clone_test[1][thomas_the_train] 等。

我已经尝试了这些不同的方法来将统一重新应用于克隆的选择，但这些都不起作用:

添加到cloneRow链:

.find('select').uniform().end()

cloneRow 链之后:

$.uniform.update('select');

或

$('.select-class').on('change', function() {
    $.uniform.update('select');
});

有人知道如何对克隆元素进行统一处理吗？任何帮助将不胜感激!

Answer 1

您所要做的就是使用$.uniform.restore('select');在开始克隆元素之前以及将这些元素附加到页面之后，您可以调用 $('select').uniform();再次应用该样式。我用您提供的示例创建了一个 jsfiddle : http://jsfiddle.net/aykRa/