javascript - 使用 jquery/ajax 将 Css 样式转换为动态内容

Question

这是我的 jquery (3.1.1)/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 响应如下(之前加载了 bootstrap 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样式？

Answer 1

确保您包含 Bootstrap 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>