jquery - 如何在使用jquery添加元素后应用CSS

Question

我正在尝试向 HTML 页面动态添加元素并应用 bootstrap 3.2 css。

这是 jquery 函数:

$( document ).ready(function() {
    $(".refresh-btn").click(function (){

        $("<div></div>").attr("class","row new").appendTo('.Item-List');
        $("<div></div>").attr("class","col-sm-3").appendTo('.Item-List .new');
        $("<div></div>").attr("class","panel panel-default").appendTo('.Item-List .new .col-sm-3');
        $("<div></div>").attr("class","panel-headingt").appendTo('.Item-List .row .col-sm-3 .panel-default');
        $("<h3></h3>").attr("class","panel-title").text("Panel title").appendTo('.Item-List .new .col-sm-3 .panel-default .panel-headingt');
        $("<div></div>").attr("class","panel-body").text("Panel content").appendTo('.Item-List .new .col-sm-3 .panel-default');
        $("<button></button>").attr("type","button").attr("class","btn btn-default btn-sm").attr("id","proccesing-btn").appendTo('.Item-List .new .col-sm-3 .panel-default');       
    })
});

这个函数的意思是复制下面的代码，动态添加:

           <div class="row">
                <div class="col-sm-3">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="panel-title">Panel title</h3>
                        </div>
                        <div class="panel-body">Panel content</div>
                        <button type="button" class="btn btn-default btn-sm"
                            id="proccesing-btn">
                            <span class="glyphicon glyphicon-chevron-down"></span>
                        </button>
                    </div>
                </div>                  
            </div> 

这是我得到的结果，除了 css 没有应用于我添加的新元素之外，一切似乎都很好:

Answer 1

你在这一行中有一个拼写错误:

$("<h3></h3>").attr("class","panel-title").text("Panel title").appendTo('.Item-List .new .col-sm-3 .panel-default .panel-headingt');

将 .panel-headingt 更改为 .panel-heading