jquery - 为什么不使用 jQuery 呈现 css？

我正在尝试通过 jquery 函数动态添加 html。基本上我有一个带有 ID 的 DIV，我尝试将一些 html 代码附加到 DIV。看起来 css 没有被渲染。我还尝试设置超时，以便 css 有时间加载，但这没有帮助。如果我将 html 直接放入 DIV 中，它就可以正常工作。非常感谢任何关于问题可能的指导。这是我的代码:

CSS 调用:

  <head>
 <!-- Theme style -->
 <link rel="stylesheet" href="../dist/css/AdminLTE.min.css"  media="all">

 <link rel="stylesheet" href="../dist/css/skins/_all-skins.min.css"  
  media="all">

 </head>

HTML:

<section>
<div class="row" id="seating_view" > </div>
</section>

jQuery:

function getSeatings()
{
 console.log("function get seatings @start");     
 $('#seating_view').append('<div class="row" >',                 
    '<div  class="col-md-6">',
     '<div class="box" id="trialbox2">',
       '<div class="box-header with-border">',
        '<h3 class="box-title email"id ="trial-header2">Berammede rettssaker kunder</h3>',
         '<div class="box-tools pull-right">',
            '<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>',
            '</button>',            
            '<button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>',
            '</div>',
          '</div>',
          '<div class="box-body">',
            '<div class="row">',
             '<div class="col-md-12">',             
              '<div class="table-responsive" >',
              '<div style="display:block-inline; height:185px; max-height:185px;  overflow-y:auto;">',
              '<table class="table no-margin"  style=" overflow-y:auto " >',
              '<thead style="display:block-inline;" >',
              '<tr>',
                '<th>Selskap</th>',                    
                '<th>Avholdes</th>',                 
                '<th>Saken gjelder</th>',                   
                '<th>Lenke</th>',
              '</tr>',
              '</thead>',   
              '<tbody id =""></tbody>',
             '</table>',
              '</div>',
            '</div>',
           '</div>',
          '</div>',
         '</div>',
        '</div>',
       '</div>',
      '</div>'); 

 };

最佳答案

尝试使用模板文字

function getSeatings() {
  $('#seating_view').append(`<div class="row" >              
    <div  class="col-md-6">
      <div class="box" id="trialbox2">
        <div class="box-header with-border">
          <h3 class="box-title email"id ="trial-header2">Berammede rettssaker kunder</h3>
          <div class="box-tools pull-right">
            <button type="button" class="btn btn-box-tool" data-widget="collapse">
              <i class="fa fa-minus"></i>
            </button>         
            <button type="button" class="btn btn-box-tool" data-widget="remove">
              <i class="fa fa-times"></i></button>
            </div>
          </div>
          <div class="box-body">
            <div class="row">
              <div class="col-md-12">         
                <div class="table-responsive">
                  <div style="display:block-inline; height:185px; max-height:185px; overflow-y:auto;">
                    <table class="table no-margin" style="overflow-y:auto">
                      <thead style="display:block-inline;">
                        <tr>
                          <th>Selskap</th>
                          <th>Avholdes</th>                 
                          <th>Saken gjelder</th>               
                          <th>Lenke</th>
                        </tr>
                      </thead>
                      <tbody></tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>`);
 };

这是 ES6 模板字面量

希望对您有所帮助。

关于jquery - 为什么不使用 jQuery 呈现 css？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50924746/

jquery - 为什么不使用 jQuery 呈现 css？

上一篇：HTML 不会与 CSS 链接。他们都在同一个文件夹中

下一篇：Jquery 数据表计算错误的宽度