CODEWITHSUNDEEP
jquerycssjquery-ui
Wern Ancheta
Wern Ancheta

Reputation: 23317

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('#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?

Upvotes: 2

Views: 1790

Answers (2)

timothyclifford
timothyclifford

Reputation: 6969

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 :)

Upvotes: 2

Pa.M
Pa.M

Reputation: 1402

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

Upvotes: 1

Related Questions