jquery - 动态添加的 jQuery 元素的样式

Question

这是演示：

http://jsfiddle.net/JH7SU/1/

我很困惑为什么相同的标记会出现不同，这取决于它是静态交付还是加载。我猜这与 DOM 的解析方式有关，并且样式在某种程度上没有从父元素正确继承？

上下文是我正在设计一个交互式表单，其逻辑太复杂而无法隐藏/显示元素。因此，我想即时创建/销毁新元素（但使用适当的 CSS）。

谢谢你的帮助！

Answer 1

这是因为，在您的静态 html 中，select并且input在两行中，意味着它们之间有一些空间。如果你想让它动态化，你也必须在那里添加一个空间。

这是一个工作小提琴。

但我强烈建议您避免这种定位，并为 和 使用严格的 CSSmargin样式padding。这是使用 CSS的更正小提琴。

Answer 2

selectandinput元素的样式设置为，inline-block如果标记中存在空格，则它们被视为内联元素，它们之间有空格。

在附加动态元素之前插入空格或换行符，或者删除静态元素中的换行符。

没有空格的例子：http: //jsfiddle.net/bhJg8/ 有空格的例子：http: //jsfiddle.net/fr5W7/

Answer 3

这是常见的问题：空白。</select>您的静态表单在和之间有一个换行符<input>，它在表单中变成了一个空白。但是当您动态附加元素时，它们之间没有任何内容。

将其更改为：

dynamicControls.append(dynamicSelect, ' ', dynamicInput);

他们看起来都一样。

或者，如果您更喜欢动态元素的外观，请去掉静态版本中的空白。

Answer 4

这只是将 html 附加到您的代码中的方式。它与您真正键入的方式不同。有趣的是，这对你有用。

dynamicControls.append(dynamicSelect);
dynamicControls.append('\r\n');
dynamicControls.append(dynamicInput);