Newly added elements using jQuery doesn't have it's CSS applied correctly -

i use jquery dynamically add new elements. newly added element doesn't have it's css applied properly.

i have demonstrated problem jsfiddle. newly added input text box has different spacing between them.

html code:

<fieldset>     <div class="control-group custom">         <label class="input-mini" for="first">start</label>         <label class="input-mini" for="first">end</label>         <label class="input-mini" for="first">share</label>     </div>     <div class="control-group custom">         <input type="text" class="input-mini">         <input type="text" class="input-mini">         <input type="text" class="input-mini">     </div>     <div>         <a id="plus_time_button" class="btn plus" href="#">       <i class="icon-plus-sign"></i>      </a>     </div> </fieldset>  

js code:

 $("#plus_time_button").live("click", function () {     var new_row = "<div class=\"control-group custom\"><input type=\"text\" class=\"input-mini\"><input type=\"text\" class=\"input-mini\"><input type=\"text\" class=\"input-mini\"></div><div><a id=\"plus_time_button\" class=\"btn plus\" href=\"#\"><i class=\"icon-plus-sign\"></i></a></div>";     $("fieldset div:last-child").remove();     $("fieldset").append(new_row); }); 

css code:

.custom label {     padding: 4px 6px;     margin-right: 20px;     display: inline-block;     text-align: center !important; } .custom input {     margin-right: 20px; } 

there similar question doesn't me.

spaces.

your original html uses code this:

<input ...> <input ...> 

your added html uses code this:

<input ...><input ...> 

the whitespace between tags in first results in little space (the... size of space) between tags, added rows lack.

a couple strategies:

broadly, can avoid annoying whitespace interference like so:

<input type=text class=input-mini ><input type=text ... 

the trailing angle bracket wraps next line consume whitespace.

but, ought doing here reusing same dom elements in added rows use in originals, there's no difference row row.

an approach use:

http://jsfiddle.net/b9chris/3mzs2/17/

create single row template - use id of "t":

<div id=t class="control-group custom">   <input type=text class=input-mini>   <input type=text class=input-mini>   <input type=text class=input-mini> </div> 

get template row , remove id, clone whenever need add 1 - way whatever html happened use in original, gets reused in appends:

var plus = $('#plus_time_button').closest('div'); var t = $('#t'); t[0].id = '';  for(var = 0; < 3; i++)     plus.before(t.clone());  $('#plus_time_button').click(function () {     plus.before(t.clone()); }); 

my original answer used existing event syntax, .live(). converting jquery 1.9 syntax isn't necessary since you're presumably still on 1.7 or 1.8, if you'd like, code above away live (it discards entirely since isn't necessary longer - tag in question never removed dom). examples converting .live() calls 1.9 provided in jquery documentation:

http://api.jquery.com/live/#entry-longdesc