Reapplying uniform js to cloned selects

Question

I'm cloning rows that contain two text inputs and a single select option. I'm using the Uniform plugin to style the selects. However, after the row is cloned, uniform styling is applied but uniform/the select itself doesn't work. The focus remains on the original select and the values of the cloned selects doesn't change.

You can see in this fiddle (associated with this thread), the exact issue with the selects that are cloned: http://jsfiddle.net/broncha/WsFyV/34/. After they are cloned, the the values never change. The fix mentioned in that thread doesn't work, as can be seen in that fiddle.

The script I'm cloning my rows with is this, tweaked from a 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;
});

In the script there, the ID's and name are all incrementing up as expected for both the .selector class and select itself. So the select id's/name would look like clone_test[0][thomas_the_train], clone_test[1][thomas_the_train], and so on.

I've tried these various methods for getting uniform reapplied to the cloned selects, but none of these work:

added to the cloneRow chain:

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

after the cloneRow chain:

$.uniform.update('select');

or

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

Anyone have any ideas how to get uniform working on the cloned elements? Any help would be hugely appreciated!!

Answer 1

All you have to do is to use $.uniform.restore('select'); before you start cloning the element(or elements) and after appending those elements to your page you call $('select').uniform(); again so the style is applied. I have created a jsfiddle with the example you provided that works : http://jsfiddle.net/aykRa/