動的に作成された要素と同じレンダリングがありません - JQuery - ブートストラップ

Question

私は自分のウェブサイトにブートストラップとJqueryを使用していますが、問題があります。

レンダリングだ

<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要素です私は私の広告で同じHTML要素を入れているので、レンダリングはそのようなもので、なぜ私にはわからない

：I [追加]ボタンをクリックしてくださいDボタンlistenner：

 $("#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); 
    }); 

おかげで静的なHTMLマークアップで

Answer 1

、そこに（単一の空間に潰される）ボタンの間に複数のスペース文字がありますが、動的な要素に使用される文字列リテラルスペースはありません。

ちょうど私が（「\ 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>" 
 
    //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

間[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>"].join("\n") 
     //console.log(htmlContent); 
     $("#rowListBuilds").append(htmlContent); 
    }); 

したがって、ブラウザには表示する1行の文字列は表示されませんが、 HTMLであなた自身を入力するならば。

それをチェックアウト： https://jsfiddle.net/np9m8gse/