[英]Bootstrap class is not applied for dynamically added content
我有一個HTML和CSS組合，如下所示
.panel-default.panel-custom { background: #05B9F0; color: white; } .headertext { text-align: center; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <script> $(document).ready(function(){ $("#getdata").click(function(){ var foobar = $("#partnumbers").val(); var urlToCall = "http://127.0.0.1:3000/foo?bar="+foobar $.getJSON(urlToCall, function(data, status){ var markup = ''; $.each(data, function(index) { var key = index; var value = data[index]; markup = markup + '<tr><td class="col-md-3">"'+key+'</td><td class="col-md-9">'+value+'</td></tr>' }) markup = markup + "</table>"; $("#data").append(markup); $("#data").addClass("table table-striped table-hover") $("#data").show() }); }); }); </script> <div class="panel panel-default panel-custom"> <h2 class="headertext"> Foo Bar Status </h3> </div> <div id=input-group class="input-group"> <input type="text" id=partnumbers class="form-control" placeholder="Part Numbers"> <span class="input-group-btn"> <button class="btn btn-default" id="getdata" type="button" >View Data</button> </span> </div> <br> <br> <table id="data" style="display:none" > <thead> <tr> <th>Description</th> <th>Status</th> </tr> </thead> </table> </body>
正如你所看到的，我在添加一個從數據生成的新標記后，在table table-striped table-hover添加了一個樣式table table-striped table-hover 。 當我檢查元素時，我可以看到該類應用於表，但在瀏覽器中，我無法看到table table-striped table-hover 。 我在這里錯過了什么？ 我從開發人員工具窗口復制了<body> div的全部內容，並將其放在靜態HTML文件中。 當我在瀏覽器中打開這個靜態文件時，我能夠看到樣式。 但不是當Node.js服務器提供頁面時。 這里有什么指示？
暫時應用解決方法。 我沒有從一開始就將表放在HTML主體中，而是在jQuery調用中生成了它並在那里應用了樣式。 這是我更新的javscript代碼塊。
$(document).ready(function(){ $("#getdata").click(function(){ var foobar = $("#partnumbers").val(); var urlToCall = "http://127.0.0.1:3000/foo?barr="+foobar $.getJSON(urlToCall, function(data, status){ var markup = '<table id="data" class="table table-striped table-hover" ><thead><tr><th>Description</th><th>Status</th></tr></thead>'; $.each(data, function(index) { var key = index; var value = data[index]; markup = markup + '<tr><td class="col-md-3">"'+key+'</td><td class="col-md-9">'+value+'</td></tr>' }) markup = markup + "</table>"; $("#data").append(markup); $("#data").addClass("table table-striped table-hover") $("#data").show() }); }); });
CSS 不適用於使用 JS 腳本在頁面中動態添加的 HTML 內容
[英]CSS not applied on HTML content dynamically added in the page using a JS script
當通過jQuery為元素動態添加類時，CSS樣式沒有得到應用
[英]CSS Styling didn't get applied when class added dynamically for the element through jQuery
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.