我沒有與動態創建的元素相同的呈現 - jQuery - 引導

我使用Bootstrap和jquery爲我的網站，我有一個問題。當我創建動態的元素，我沒有相同的渲染我的「靜態」的元素，這是我的HTML元素：我沒有與動態創建的元素相同的呈現 - 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元素在我的廣告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); 
    });

由於

來源

2016-04-11 KhoyaDev

可以在您的代碼添加Add按鈕？ – claudios

區別在於空格。由於換行符，您的原始版本在按鈕之間存在間隙。 jQuery附加版本構建爲連續字符串。最簡單的解決方法是在您構建的字符串中的按鈕之間添加一個空格。 –

你還好吧@RoryMcCrossan – KhoyaDev

在靜態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>

來源

2016-04-11 08:42:52

非常感謝你，它工作!!!!!我已經嘗試了許多東西，什麼也沒有！ – KhoyaDev

之間我有一個類似的問題一次，通過建立模板字符串換行符解決它（通過換行符「\ 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/

來源

2016-04-11 08:46:53 Fidel90

謝謝！你的解決方案和阿倫P Johny解決方案工作！ – KhoyaDev

我沒有與動態創建的元素相同的呈現 - jQuery - 引導

回答

相關問題