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

Question

I use jQuery to dynamically add new elements. But the newly added element doesn't have it's CSS applied properly.

I have demonstrated my problem with the jsFiddle. The 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 is a somewhat similar question but it doesn't help me.

Answer 1

moved plus_time_button outside of fieldset

$("#plus_time_button").live("click", function () {
    $("fieldset").find('div:last').clone().appendTo('fieldset');
    //scrollToBottom("create_table");
});

working Fiddle -- http://jsfiddle.net/SSPRJ/

Answer 2

Spaces.

Your original HTML uses code like this:

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

Your added HTML uses code like this:

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

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

A couple strategies:

Broadly, you can avoid annoying whitespace interference like this like so:

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

The trailing angle bracket wraps to the next line to consume all the whitespace.

But, what you really ought to be doing here is reusing the same DOM elements in the added rows as you use in the originals, so there's no difference row to row.

An approach I often use:

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

Create a single row template - I like to use an 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 the template row and remove its id, then just clone it whenever you need to add one - that way whatever HTML you happened to use in the original, gets reused in your appends:

var plus = $('#plus_time_button').closest('div');
var T = $('#T');
T[0].id = '';

for(var i = 0; i < 3; i++)
    plus.before(T.clone());

$('#plus_time_button').click(function () {
    plus.before(T.clone());
});

My original answer used your existing event syntax, with .live(). Converting to the jQuery 1.9 syntax isn't necessary since you're presumably still on 1.7 or 1.8, but if you'd like, the code above does away with live (it actually discards it entirely since it isn't necessary any longer - the tag in question is never removed from the DOM). Examples for converting .live() calls for 1.9 are provided in the jQuery documentation:

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

Answer 3

You have to put some space between the inputs, so i have added "&nbsp" between your inputs

$("#plus_time_button").live("click", function () {
    var new_row = "<div class=\"control-group custom\"><input type=\"text\" class=\"input-mini\">&nbsp<input type=\"text\" class=\"input-mini\">&nbsp<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);
    scrollToBottom("create_table");
});

JSFIDDLE

Answer 4

The browser is accounting for the spaces in your initial HTML.

Quick answer

Heres a demo

Remove the spaces in your initial HTML:

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

The above two lines are separated by a carriage return which the browser interprets as a physical space.

Keep your elements without any space in them:

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

Why?

Since you are using display: inline-block the browser is also applying the rules that it uses to interpret text and as such respects the space between your html elements.

When you're outputting the dynamic elements using javascript the concatenation of strings does not include a space.

You could also use:

.custom label {
  padding: 4px 6px;
  margin-left: 20px;
  display: block;
  float: left;
}

.custom label:first-child { margin-left: 0; }

Answer 5

I achieve this for my accordion, after append a new node, with

$('#accordion').accordion( "refresh" );