How to apply jquery ui styling on dynamically generated elements

I'm generating text fields using jquery. And I'm using jquery ui to style the form. My problem is that the dynamically generated elements, doesn't get the css of jquery ui:

var index = 0;
    $('#btn_generate').live('click', function(){
                var tr = $("<tr>").appendTo(开发者_StackOverflow中文版'#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++;
            });

How do I solve this one?

I'm guessing you're getting jQuery to style the form initially on document ready?

If so, you have two options...

1. Re-run your initial jQuery each time you generate additional form elements
2. Manually add the required jQuery ui classes to each new object. (.addClass should work best IMO)

If I'm barking up the wrong tree let me know :)

you can try something like this:

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