5

我使用 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;
}

有一个类似的问题，但它对我没有帮助。

4

5 回答 5

1

移出plus_time_button字段集

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

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

于 2013-05-13T08:19:21.297 回答
1

你必须在输入之间放置一些空间，所以我&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

于 2013-05-13T08:25:03.073 回答
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

于 2013-05-13T08:20:52.833 回答
1

浏览器正在考虑初始 HTML 中的空间。

快速回答

Heres a demo

删除初始 HTML 中的空格：

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

上面两行由一个回车分隔，浏览器将其解释为一个物理空间。

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

<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; }
于 2013-05-13T08:27:17.450 回答
0

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

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

于 2016-09-11T10:07:32.830 回答