我没有动态创建的元素相同的渲染 - JQuery - Bootstrap

Question

我在我的网站上使用Bootstrap和Jquery，我有一个问题。 当我动态创建元素时，我没有与'static'元素相同的渲染，这是我的html元素：

<div class="row" style="margin-bottom: 10px;">
  <div class="col-xs-4 col-sm-2">
    <button type="button" class="action btn btn-default">
       <span class="glyphicon glyphicon-cog"></span>
    </button>
    <button type="button" class="action btn btn-default">
       <span class="glyphicon glyphicon-remove"></span>
    </button>
  </div>
</div>

这是渲染：

这就是渲染，当我点击添加按钮时：

我不知道为什么渲染是这样的，因为我在我的添加按钮监听器中放了相同的html元素：

        $("#btnAddBuild").click(function(){
        var htmlContent = "<div class='row' style='margin-bottom: 10px;'>" +
                                "<div class='col-xs-4 col-sm-2'>" +
                                    "<button type='button' class='action btn btn-default'><span class='glyphicon glyphicon-cog'></span></button>" +
                                    "<button type='button' class='action btn btn-default'><span class='glyphicon glyphicon-remove'></span></button>" +
                                "</div>" +
                            "</div>"
        //console.log(htmlContent);
        $("#rowListBuilds").append(htmlContent);
    });

谢谢

Answer 1

在静态html标记中，按钮之间有多个空格字符（折叠到单个空格），但在用于动态元素的字符串文字中没有空格。

只需在按钮元素之间添加[space]字符即可

  $("#btnAddBuild").click(function() { var htmlContent = "<div class='row' style='margin-bottom: 10px;'>" + "<div class='col-xs-4 col-sm-2'>" + "<button type='button' class='action btn btn-default'><span class='glyphicon glyphicon-cog'></span></button> " + "<button type='button' class='action btn btn-default'><span class='glyphicon glyphicon-remove'></span></button>" + "</div>" + "</div>" //console.log(htmlContent); $("#rowListBuilds").append(htmlContent); }); 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="rowListBuilds"></div> <button id="btnAddBuild">Add</button> 

Answer 2

我有一个类似的问题并通过使用换行符构建模板字符串来解决它（通过换行符“\\ n”）：

 $("#btnAddBuild").click(function(){
        var htmlContent = ["<div class='row' style='margin-bottom: 10px;'>",
                                "<div class='col-xs-4 col-sm-2'>",
                                    "<button type='button' class='action btn btn-default'><span class='glyphicon glyphicon-cog'></span></button>",
                                    "<button type='button' class='action btn btn-default'><span class='glyphicon glyphicon-remove'></span></button>",
                                "</div>",
                            "</div>"].join("\n")
        //console.log(htmlContent);
        $("#rowListBuilds").append(htmlContent);
    });

因此，浏览器不会显示单行字符串，而是显示多行显示，就像您自己在HTML中键入一样。

看看： https ： //jsfiddle.net/np9m8gse/