下面的代码将一个 json 文件加载到我的应用程序中，以填充一些表数据。它可以完成工作。
function init_main () {
$('html').hide().fadeIn('slow');
// popuate from index.json
var json = $.getJSON(chrome.extension.getURL('js/index.json'), function(json) {
// CREATE SETTINGS TABLE WITH GIVEN INDEX
for (var property in json) {
var table = $('<table></table>').addClass('table');
var header = $('<thead></thead>').addClass('thead-inverse');
var head_r = $('<tr></tr>');
var h1 = $('<th></th>').text(property);
var h2 = $('<th></th>').text('check to remove: ');
head_r.append(h1);
head_r.append(h2);
header.append(head_r);
table.append(header);
var body = $('<tbody></tbody>');
table.append(body);
for (var tag in json[property]) {
var body_r = $('<tr></tr>');
var d1 = $('<td></td>').text(tag);
var d2 = $('<td></td>') // maybe change to class?
$('<input />', { type: 'checkbox', id: tag}).appendTo(d2);
body_r.append(d1);
body_r.append(d2);
body.append(body_r);
}
$('#tableWrap').append(table);
}
});
}
//bind events to dom elements
document.addEventListener('DOMContentLoaded', init_main);
但是，与我的其他 html 标记不同，只有这些元素不会使用 Bootstrap 库来改变我的 CSS。所有其他 html 标记都成功地使用了 bootstrap 库。
我曾尝试将代码移到回调之外，但没有成功。控制台中没有错误。
有人知道为什么 bootstrap 在上面的代码片段中不会生效吗？我认为这与页面加载有关，但到目前为止我还没有看到 window.onPageLoad 有任何成功()
这是我在 html 中导入的脚本以供引用:
<html>
<head>
<!-- load stylesheets: Bootstrap v2.3.0 - http://twitter.github.com/bootstrap/index.html -->
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"></link>
<!-- load javascript: jQuery 1.9.1 - http://jquery.com/ -->
<script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>
<!-- load javascript: Bootstrap v2.3.0 - http://twitter.github.com/bootstrap/ -->
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<!-- load stylesheets: internal -->
<link rel="stylesheet" type="text/css" href="../css/global.css"></link>
<link rel="stylesheet" type="text/css" href="../css/main.css"></link>
</head>
<body>
<div class="navbar">
<div class="navbar-inner">
<a id="home" id="active" class="brand" href="#">
<!-- UNCOMMENT THE CSS VALUES TO TEST OTHER DIMENTIONS -->
<img src="../images/icon.png" alt="">
<span class="icon-bar"></span>
Fluff 1.0
</a>
<a id="settings" class ="brand" href="#" >
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
Settings</a>
<a id="run" class ="brand" href="#" >
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
Run</a>
</div>
</div>
<div id="outer">
<!-- Main Page -->
<div id="main-inner">
<div id="main-title"> Fluff 1.0 </div>
<div id="textblock">Donate or contact block here</div>
</div>
<!-- Settings Page -->
<div id="settings-inner">
<h5 id="directions"> <span></span> Select Tags to Remove from Automated Browser Queries </h5>
<div id="tableWrap">
</div>
</div>
<!-- Run Page -->
<div id="run-inner">
<table class='table'>
<thead>
<tr>
<td> 1 </td>
<td> 2</td>
</tr>
</thead>
</table>
</div>
</div>
<!-- load javascript: unique html page javascript file -->
<script type="text/javascript" src="../js/main.js"></script>
</body>
编辑: sample.json - “num”键与任何问题或代码都不相关
{
"sex": {
"M":{
"num":13,
},
"F": {
"num":13,
},
"T": {
"num":0
}
},
"politics": {
"L": {
"num":10,
},
"R": {
"num":10,
}
},
"race": {
"AMI":{
"num":6,
},
"ASI":{
"num":7,
},
"AFA":{
"num":7,
},
"PCI":{
"num":0
},
"WHT":{
"num":2,
"3":"-"
},
"HSP":{
"num":5,
"6":"-"
},
"MDE":{
"num":6,
}
},
"orientation": {
"STR": {
"num":0
},
"GAY": {
"num":0
},
"OTH": {
"num":0
}
},
"interests": {
"GARD":{
"num":4,
},
"NHL":{
"num":1,
},
"NBA":{
"num":1,
},
"TECH":{
"num":0
}
}
}
最佳答案
我不完全理解你的问题，但我通过删除一些无用的 html 文件将你的示例放在 jsfiddle 中以使其易于阅读并且可以正常工作。唯一错误的代码是 var json = $.getJSON。你为什么这样做？然而你根本没有任何返回值，如果它是它永远不会在像 get 这样的异步函数中工作。
第二个问题是你从不调用你的函数!!
查看此代码并与我分享您的想法:
关于javascript - Bootstrap 不使用 jquery 动态创建的元素呈现，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43197823/