jquery - 使用 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/

创建单行模板 - 我喜欢使用 id“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>

获取模板行并删除其 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 文档中提供了将 .live() 调用转换为 1.9 的示例:

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