Question

I am cloning a block of HTML and then appending it to a form. Radio button doesn't work after .clone.

Example: http://jsfiddle.net/JNCFP/169/

HTML:

<form>
    <div class="formElement">
        <input type="radio" name="radio" />
        <input type="text" name="text[]" />
        <button class="button" type="button">Clone</button>
    </div>
</form>

JavaScript:

$(function () {
    // Uniform every form element
    $('input, select').uniform();

    // clone Div
    $('form .button').click(function () {
        var el = $(this).parents('.formElement');
        $(el).clone(true).insertAfter($(el));
    }); 
});
Was it helpful?

Solution

You need to call .uniform() again after you clone it so it can initialize the plugin on the new elements:

// Uniform every form element
$(function () {
    // Show browser information
    $('input, select').uniform();

    $('form').on('click', '.button', function () {
        var el = $(this).parents('.formElement');
        $(el).clone().insertAfter($(el));
        $('input, select').uniform();
    });

});

Fiddle

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top