CSS樣式來使用jQuery/AJAX動態內容

這裏是我的jQuery（3.1.1）/ Ajax請求：CSS樣式來使用jQuery/AJAX動態內容

$.ajax({ 
     type: "POST", 
     url: "pref.php", 
      dataType: "text", 
     data: { groupe_id: groupe_id, action: "getProducts" }, 
     cache: false, 
      error: function(html){ 
       console.log(html); 
      }, 
     success: function(html) { 
        $("#listProducts").html(html); 
     } 
    });

爲#listProducts HTML響應是如下（與引導CSS之前加載）：

<div class="row"> 
    <div class="form-group row col-xs-4"> 
    <label class="col-xs-3 text-right" for="productName-72"><b>Name:</b></label> 
    <div class="col-xs-9"> 
     <input type="text" class="form-control form-control-sm product-name" id="productName-72" aria-describedby="productName"> 
    </div> 
    </div> 
... 
</div>

但是沒有適用於這部分代碼的樣式。

我能做些什麼來加載bootstrap.css風格？

來源

2016-12-06 shlagwuk

有包含的是樣式表？ – brk

不知道你的問題是什麼，但是'row> col-xs-4'沒有任何意義。也許你可以定義「無風格」應用。不是你所期望的，還是真的沒有風格？例如沒有發光的藍色邊框？ –

感謝「行>行col-xs-4」提示。這是我的錯誤，我的代碼現在正在工作。抱歉，添麻煩了。 – shlagwuk

確保你包括引導css文件，如：

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">

向DOM動態添加的元素應該可以正常工作，使用bootstrap檢查下面的示例。

注意：沒有必要在form-group row col-xs-4的額外row類。

希望這會有所幫助。

$('#listProducts').append('<div class="row"><div class="form-group col-xs-4"><label class="col-xs-3 text-right" for="productName-72"><b>Name:</b></label><div class="col-xs-9"><input type="text" class="form-control form-control-sm product-name" id="productName-72" aria-describedby="productName"></div></div>');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 

 
<div id="listProducts"></div>

來源

2016-12-06 10:10:22

我的代碼現在正在工作，這是我的錯誤。感謝「行>行col-xs-4」提示。 – shlagwuk

請確保您的引導程序css文件在ajax請求之前加載到頁面上，並且樣式將自動應用於新添加的內容。

所以，你不需要「加載」自舉（CSS文件）每個連續的請求，自顧自地加載網頁上的CSS文件

來源

2016-12-06 10:08:55 Sasha89

CSS樣式來使用jQuery/AJAX動態內容

回答

相關問題