Question

我正在使用Uniform JS插件进行表单输入。在下面的代码中，我试图在动态创建的字段中初始化uniformjs样式。

在下面的html代码中，有一个名为ext（）的函数，它在单击添加按钮时插入一个新行。我希望uniformjs样式也适用于那些动态生成的字段。我尝试过并试过但它变得越来越糟糕，它变得崩溃了，即使在选择了......之后，选择框也根本没有显示所选的值:(

HTML

<table style="width:100%;border:1px solid;" id="table1">
  <tr><td>
  <select>
            <option>Through Google</option>
            <option>Through Twitter</option>
            <option>Other&hellip;</option>
            <option>&lt;Hi&gt;</option>
  </select>
</td>
<td><button onClick="ext();">Add</button></td>

</tr>
</table>

JS

$(function()
{
    $("input, textarea, select, button").uniform();
});

function ext()
{
    $(function()
    {
        $("input, textarea, select, button").uniform();
    });

    rl = document.getElementById("table1").rows.length;

    var a = document.getElementById("table1").insertRow(rl);
    var b = a.insertCell(0);


    b.innerHTML = '<div style="width:95%;margin-bottom:0px;padding:5px;"><div class="selector" id="uniform-clinic_visit"><span style="-moz-user-select: none;">Monthly</span><select name="clinic_visit[]" id="clinic_visit" onChange=""> <option>-Select-</option><option value="Weekly">Weekly</option>         <option value="Monthly">Monthly</option></select></div></div>';
}

资源 - www.uniformjs.com

Answer 1

而不是"input, textarea, select, button"，您只需使用":input"就可以覆盖所有输入类型元素。请尝试以下内容：

$(function(){
    $(":input").uniform();
  });

function ext()
        {
        rl=document.getElementById("table1").rows.length;

        var a=document.getElementById("table1").insertRow(rl);
        var b=a.insertCell(0);


    b.innerHTML='<div style="width:95%;margin-bottom:0px;padding:5px;"><div class="selector" id="uniform-clinic_visit"><span style="-moz-user-select: none;">Monthly</span><select name="clinic_visit[]" id="clinic_visit" onChange=""> <option>-Select-</option><option value="Weekly">Weekly</option>         <option value="Monthly">Monthly</option></select></div></div>';

    $(function(){
        $(":input").uniform();
      });
    }

Answer 2

我不知道Uniform是如何工作的，所以只需猜测：在ext()函数中，移动以下代码：

$("input, textarea, select, button").uniform();

是函数的最后一行。也就是说，在创建新元素之后调用.uniform() 。（显然我假设这是对.uniform()的调用，它适用于你所谈论的风格。）

另请注意，在ext()功能中，您目前使用文档就绪功能包围上述行，而您无需这样做。

Answer 3

试试这个：

function ext()
        {

        $("#table1").append('<tr><td><div style="width:95%;margin-bottom:0px;padding:5px;"><div class="selector" id="uniform-clinic_visit"><span style="-moz-user-select: none;">Monthly</span><select name="clinic_visit[]" id="clinic_visit" onChange=""> <option>-Select-</option><option value="Weekly">Weekly</option>         <option value="Monthly">Monthly</option></select></div></div></td></tr>');

        $(":input").uniform();
    }

如何使用Jquery addClass（）添加和删除选择输入的类？

HTML

JS

3 个答案: