javascript - 绑定(bind)监听器以动态生成 HTML 中的内容

Question

有一个使用 jquery 的动态生成页面，如下所示:

var html = "tab...button..datatable...etc...";

然后我在点击按钮时生成页面

$("btn").on("click",function(){
     $("body").append(html);
});

问题是，生成的 html 中的所有元素都没有事件监听器，所以对于我使用的单击按钮/更改事件

 $('body').on('change', '.gui-file', function (event) {

但是，对于 Bootstrap 元素，如何将事件绑定(bind)到生成的元素？例如选项卡？

或者除了在生成 html 内容后进行绑定(bind)之外，还有什么更好的方法吗？谢谢

标签:

                             <div class="tab-block mb10">
                                    <ul class="nav nav-tabs nav-tabs-left tabs-border">
                                        <li class="active">
                                            <a href="#tab1_1" data-toggle="tab" aria-expanded="true">English</a>
                                        </li>
                                        <li class="">
                                            <a href="#tab1_2" data-toggle="tab" aria-expanded="false">繁體</a>
                                        </li>
                                        <li class="">
                                            <a href="#tab1_3" data-toggle="tab" aria-expanded="false">简体</a>
                                        </li>
                                    </ul>
                                    <div class="tab-content">
                                        <div id="tab1_1" class="tab-pane active">
</div>
<div id="tab1_2" class="tab-pane">
</div>
<div id="tab1_3" class="tab-pane">
</div>
</div>

Answer 1

能否请您通过调用初始化新添加的标签:

$("btn").on("click",function(){
     $("body").append(html);
     $(".nav-tabs").tab();
});