使用 jQuery 新添加的元素没有正确应用它的 CSS

Question

我使用 jQuery 来动态添加新元素。但是新添加的元素没有正确应用它的 CSS。

我已经用jsFiddle 证明了我的问题。新添加的输入文本框间距不同。

HTML 代码：

<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代码：

 $("#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 代码：

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

有点similar question，但对我没有帮助。

Answer 1

空格。

您的原始 HTML 使用如下代码：

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

您添加的 HTML 使用如下代码：

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

第一个标签之间的空白导致标签之间有一点额外的空间（空间的大小），这是添加的行所缺少的。

几个策略：

总的来说，您可以像这样避免烦人的空白干扰：

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

尾部尖括号换到下一行以消耗所有空格。

但是，您在这里真正应该做的是在添加的行中重用与原始行中相同的 DOM 元素，因此行与行之间没有区别。

我经常使用的一种方法：

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

创建一个单行模板 - 我喜欢使用“T”的 id：

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

获取模板行并删除其 id，然后在您需要添加一个时克隆它 - 这样您在原始中使用的任何 HTML 都会在您的附加中重复使用：

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

我的原始答案使用了您现有的事件语法，带有 .live()。没有必要转换为 jQuery 1.9 语法，因为您可能仍在使用 1.7 或 1.8，但如果您愿意，上面的代码可以取消 live （实际上它完全丢弃了它，因为它不再需要 -有问题的标签永远不会从 DOM 中删除）。 jQuery 文档中提供了为 1.9 转换 .live() 调用的示例：

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

Answer 2

将plus_time_button 移出字段集

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

工作小提琴 -- http://jsfiddle.net/SSPRJ/

Answer 3

你必须在输入之间放置一些空格，所以我在你的输入之间添加了“&nbsp”

$("#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

浏览器会占用初始 HTML 中的空间。

快速解答

Heres a demo

删除初始 HTML 中的空格：

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

以上两行由carriage return 分隔，浏览器将其解释为物理空间。

保持你的元素没有任何空间：

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

为什么？

由于您使用的是display: inline-block，因此浏览器也在应用它用来解释文本的规则，因此尊重您的 html 元素之间的空间。

当您使用 javascript 输出动态元素时，字符串的连接不包含空格。

你也可以使用：

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

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

Answer 5

我为我的手风琴实现了这一点，在附加一个新节点之后，

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