个人中心
gpt4 book ai didi

javascript - Bootstrap 不使用 jquery 动态创建的元素呈现

转载 作者：行者123 更新时间：2023-11-28 04:01:11 27 4
gpt4 key购买 nike

下面的代码将一个 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 这样的异步函数中工作。第二个问题是你从不调用你的函数!!

查看此代码并与我分享您的想法:

jsfiddle

关于javascript - Bootstrap 不使用 jquery 动态创建的元素呈现，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43197823/

27 4 0
文章推荐： html - 更改字体大小时悬停元素中的文本不居中
文章推荐： javascript - 如何赋予用户控制照片动画的能力
文章推荐： html - 无法在两个文件夹之间加载 css 和 Bootstrap
文章推荐： 带标题的 Javascript 图像 slider - 标题不显示
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com