如何在动态生成的元素上应用 jquery ui 样式答案

【问题标题】：How to apply jquery ui styling on dynamically generated elements如何在动态生成的元素上应用 jquery ui 样式
【发布时间】：2011-09-10 12:43:49
【问题描述】：

我正在使用 jquery 生成文本字段。我正在使用 jquery ui 来设置表单的样式。我的问题是动态生成的元素，没有得到 jquery ui 的 css：

var index = 0;
    $('#btn_generate').live('click', function(){
                var tr = $("<tr>").appendTo('#tbl_body');
                var td =  $("<td>").appendTo(tr);
                var txt = $("<label>").attr({'for' : index}).appendTo(td).html('content' + index + ':').css({'color' : 'white'});
                $("<input>").attr({'type' : 'text', 'name' : 'field[]', 'id' : index}).appendTo(td);
                index++;
            });

我该如何解决这个问题？

【问题讨论】：

标签： jquery css jquery-ui

【解决方案1】：

我猜你正在让 jQuery 为表单设置样式，最初在文档准备好了吗？

如果是这样，您有两个选择...

每次生成其他表单元素时重新运行初始 jQuery
手动将所需的 jQuery ui 类添加到每个新对象。（.addClass 应该最适合 IMO）

如果我叫错了树，请告诉我 :)

【讨论】：

试过你说的，调用了手风琴（）函数。然后为每个新文本字段添加一个类： $("").attr({'type' : 'text', 'name' : 'field[]', 'id' : index}).appendTo( td).addClass('ui-widget');但它没有用

【解决方案2】：

你可以试试这样的：

var index = 0;
$('#btn_generate').live('click', function(){
            var tr = $("<tr>").appendTo('#tbl_body');
            var td =  $("<td>").appendTo(tr);
            var txt = $("<label>").attr({'for' : index}).appendTo(td).html('content' + index + ':').css({'color' : 'white'});
            $("<input>").attr({'type' : 'text', 'name' : 'field[]', 'id' : index}).appendTo(td);

 //as you have given id=index to your input
  $('#'+index).yourjqueryuifunction();
            index++;
        });

【讨论】：