Question

I use two jQuery plugins on new project of mine:

$("input[type=text].color").miniColors();
$("input[type=file], input[type=radio], input[type=checkbox], select").uniform();

In this project, I have multiple upload forms that are build dynamically with jQuery – I have a hidden container <div> with multiple form elements in it. Depending on the user choice needed elements are being added to the form with html() function.

User can switch between multiple types of form with tabs (Twitter Bootstrap).

I noticed that plugins are not working correctly on those form elements.

Is there any possibility to bind function to a form with live() function or is there any other way?

** Edit **
Form is being built with following function:

function buildForm(target)
{
    var form = $("#" + target);

    switch(target){
        case 'image':
            form.html($("#wrapper-title").html() + $("#wrapper-src").html());
            break;
        case 'generate':
            form.html($("#wrapper-title").html() + $("#wrapper-src").html() + $("#wrapper-generate").html());
            break;
        case 'video':
            form.html($("#wrapper-title").html() + $("#wrapper-url").html());
            break;
        case 'text':
            form.html($("#wrapper-title").html() + $("#wrapper-body").html());
            break;
    }
}

All elements are placed outside of the form and are moved between <form> tags while user changes the type of the form.

What does not work? For example, in Uniform plugin, the state of the radio/select buttons are not changed (graphic is not being changed).

Cheers!

Answer 1

Initialize the plugins inside of the buildForm method after the switch/case statement only targeting the newly added form.

function buildForm(target)
{
    var form = $("#" + target);

    switch(target){
        case 'image':
            form.html($("#wrapper-title").html() + $("#wrapper-src").html());
            break;
        case 'generate':
            form.html($("#wrapper-title").html() + $("#wrapper-src").html() + $("#wrapper-generate").html());
            break;
        case 'video':
            form.html($("#wrapper-title").html() + $("#wrapper-url").html());
            break;
        case 'text':
            form.html($("#wrapper-title").html() + $("#wrapper-body").html());
            break;
    }
    $("input[type=text].color", form).miniColors();
    $("input[type=file], input[type=radio], input[type=checkbox], select", form).uniform();
}