Question

我有一个问题，我有一个简单的测试页面，有6个按钮。在页面正文中声明，并在页面加载后使用jquery添加3。附加了jquery的3，在加载之前在页面中声明的3之间没有间距。

这是一个证明问题的小提琴： http://jsfiddle.net/codeowl/c5QRS/

以下是代码：

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Bootstrap Test Page</title>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"</script>
</head>
<body>
    <div>
        <div>Buttons In Page</div>
        <button type="button" class="btn btn-default">Add</button>
        <button type="button" class="btn btn-default">Edit</button>
        <button type="button" class="btn btn-default">Delete</button>
    </div>

    <div id="DynamicButtonContainer">
        <div>Buttons Dynamically Added</div>

    </div>

    <script>
        $(document).ready(function() {
            var eDynamicButtonContainer = $('#DynamicButtonContainer');
            eDynamicButtonContainer.append($('<button type="button" class="btn btn-default">Add</button>' + 
                                             '<button type="button" class="btn btn-default">Edit</button>' + 
                                             '<button type="button" class="btn btn-default">Delete</button>'));
        });
    </script>   
</body>
</html>

如何解决此问题并获取附加按钮以显示与加载前在页面中声明的间距相同的间距？

感谢您的时间，

此致

斯科特

Answer 1

标记中的按钮在标记之间有空格（换行符的换行符和空格/标签符号），但是标记中的按钮不会附加，这就是为什么他们不在＆＃ 39;渲染时它们之间有空格。如果您在它们之间添加\n，那就是空格，并将它们分隔开来。像这样：Updated fiddle

$(document).ready(function() {
    var eDynamicButtonContainer = $('#DynamicButtonContainer');
    eDynamicButtonContainer.append(
        $('<button type="button" class="btn btn-default">Add</button>\n' +
        // Note -----------------------------------------------------^^ 
          '<button type="button" class="btn btn-default">Edit</button>\n' +
        // And -------------------------------------------------------^^
          '<button type="button" class="btn btn-default">Delete</button>'));
});

Answer 2

http://jsfiddle.net/c5QRS/2/

这是因为标签之间存在空白。您可以使用\n连接模拟空白区域，然后就可以了。

在页面加载后附加到页面时，引导程序3按钮在它们之间没有空格的问题

2 个答案: