jQuery 插件和动态生成的表单

Question

我在我的新项目中使用了两个 jQuery 插件：

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

在这个项目中，我有多个使用 jQuery 动态构建的上传表单 - 我有一个隐藏容器 <div>，其中包含多个表单元素。根据用户的选择，使用html() 函数将所需元素添加到表单中。

用户可以使用标签在多种类型的表单之间切换（Twitter Bootstrap）。

我注意到插件在这些表单元素上无法正常工作。

是否有可能将函数绑定到具有live() 函数的表单或有其他方法吗？

** 编辑 ** 正在使用以下功能构建表单：

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

所有元素都放置在表单之外，并在用户更改表单类型时在<form> 标签之间移动。

什么不起作用？例如，在 Uniform 插件中，单选/选择按钮的状态没有改变（图形没有改变）。

干杯！

Answer 1

在 switch/case 语句之后初始化 buildForm 方法内的插件，仅针对新添加的表单。

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