JS 附加的文本框意外挤在一起？答案

【问题标题】：Text boxes appended by JS squish together unexpectedly?JS 附加的文本框意外挤在一起？
【发布时间】：2014-01-11 02:22:54
【问题描述】：

我在我的 html 中创建了一组文本输入框，如下所示：

<div id='inputs'>
    <% 6.times do |i| %>

        <%= text_field_tag "box_" + i.to_s, nil, { :id => "box_" + i.to_s,
        :class => "boxes"} %>

    <% end %>
</div>

然后我在框下方有一个按钮的 JS 侦听器：

var nextId = 6;

$("#addBtn").on("click",function(){
    $("#inputs").append("<input type='text' class='boxes' id='box_"+nextCCId+"'/>");
    nextId++;
});

问题是这样的：

渲染时添加的文本框有间隔，但是用JS添加的文本框不间隔。

两种类型的框的样式在我的浏览器元素检查器中似乎完全相同，这是怎么回事？它以前似乎可以正常工作。我不确定我是刚刚注意到还是我做了什么导致这种情况，但撤消我最近的更改并不能解决它。请帮忙！

【问题讨论】：

标签： javascript jquery ruby-on-rails forms view

【解决方案1】：

我认为您只是在 jquery 标记中缺少一个空格。

$("#addBtn").on("click",function(){
    $("#inputs").append("<input type='text' class='boxes' id='box_"+nextCCId+"'/> <!-- space added here -->");
    nextId++;
});

【讨论】：

谢谢！这是我不知道的 html 的一个有趣的怪癖。