Recently Added Elements Using jQuery Do Not Have Correct CSS Usage

Question

I use jQuery to dynamically add new elements. But the newly added element does not have CSS, which is applied properly.

I demonstrated my problem with jsFiddle . The newly added text input field has a 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 that doesn't help me.

Answer 1

Spaces.

The source code uses the following code:

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

Your added HTML uses this code:

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

The space between the tags in the first leads to a little extra space (space size) between the tags that are not in the added lines.

A couple of strategies:

In general, you can avoid annoying clutter like this:

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

A sliding angle bracket wraps the next line to eliminate all spaces.

But what you really have to do is reuse the same DOM elements in the added lines as in the originals, so there is no difference line for the line.

The approach that I often use is:

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

Create a single line pattern - I like to use the identifier "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 string and delete its identifier, and then just clone it when you need to add one - this way, any HTML that you used in the original is reused in your uploads:

 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 jQuery 1.9 syntax is not required, since you are apparently still at 1.7 or 1.8, but if you want, the code above removes the living (it actually discards it completely since it is no longer needed) the tag about speech is never deleted from the DOM). Examples of conversion of .live () calls for 1.9 are given in the jQuery documentation:

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

Answer 2

moved plus_time_button outside the field.

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

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

Answer 3

You have to put some space between the inputs, so I added "   " 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 takes into account spaces in the source HTML.

Quick response

Heres demo

Remove the spaces in the original 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 physical space.

Store your items without spaces in them:

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

Why?

Since you use display: inline-block , the browser also applies the rules that it uses to interpret text, and as such respects the space between your html elements.

When you output dynamic elements using javascript, string concatenation does not include space.

You can 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 adding a new node, with

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