Bootstrap tab 拓展支持iframe加载远程资源，但是切换后无法触发shown.bs.tab事件

发布于 2022-09-01 12:02:49 字数 4798 浏览 22 评论 0

源代码如下，直接保存为html就可以运行：

<html>

<head>
    <meta charset='utf-8'>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <!-- 可选的Bootstrap主题文件（一般不用引入） -->
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <script>
    var addTab = function(obj) {
        var id = "tab_" + obj.id;
        $(".active").removeClass("active");
        //如果TAB不存在，创建一个新的TAB
        if (!$("#" + id)[0]) {
            //固定TAB中IFRAME高度
            mainHeight = 100;
            //创建新TAB的title
            title = '<li role="presentation" id="tab_' + id + '"><a href="#' + id + '" aria-controls="' + id + '" role="tab" data-toggle="tab">' + obj.title;
            //是否允许关闭
            if (obj.close) {
                title += ' <i class="tabclose" tabclose="' + id + '"><span class="glyphicon glyphicon-remove"></span></i>';
            }
            title += '</a></li>';
            //是否指定TAB内容
            if (obj.content) {
                content = '<div role="tabpanel" class="tab-pane" id="' + id + '">' + obj.content + '</div>';
            } else { //没有内容，使用IFRAME打开链接
                content = '<div role="tabpanel" height="100%" width="100%" class="tab-pane" id="' + id + '"><iframe src="' + obj.url + '" width="100%" height="' + mainHeight +
                    '%" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no" allowtransparency="yes"></iframe></div>';
            }
            //加入TABS
            $(".nav-tabs").append(title);
            $(".tab-content").append(content);
        }
        //激活TAB
        $("#tab_" + id).addClass('active');
        $("#" + id).addClass("active");
    };

    var closeTab = function(id) {
        //如果关闭的是当前激活的TAB，激活他的前一个TAB
        if ($("li.active").attr('id') == "tab_" + id) {
            $("#tab_" + id).prev().addClass('active');
            $("#" + id).prev().addClass('active');
        }
        //关闭TAB
        $("#tab_" + id).remove();
        $("#" + id).remove();
    };
    $(function() {
        mainHeight = $(document.body).height() - 45;
        $('.main-left,.main-right').height(mainHeight);
        $(".nav-tabs").on("click", "[tabclose]", function(e) {
            id = $(this).attr("tabclose");
            closeTab(id);
        });
        $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
            console.log($(e.target));
        })
    });
    </script>
    <script>
    $(function() {
        $("#addnew").on("click", function() {
            addTab({
                id: 'alex',
                title: 'alexchen',
                close: true,
                content: 'http://www.baidu.com'
            });
        })
    });
    </script>
</head>

<body>
    <span id="addnew">新增一个tab</span>
    <div role="tabpanel">
        <!-- Nav tabs -->
        <ul class="nav nav-tabs" role="tablist" id="myTab">
            <li role="presentation" class="active">
                <a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
            <li role="presentation">
                <a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
            <li role="presentation">
                <a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
            <li role="presentation">
                <a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
        </ul>
        <!-- Tab panes -->
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane" id="home">home</div>
            <div role="tabpanel" class="tab-pane" id="profile">profile</div>
            <div role="tabpanel" class="tab-pane" id="messages">messages</div>
            <div role="tabpanel" class="tab-pane" id="settings">settings</div>
        </div>
    </div>
</body>

</html>

问题：如何才能触发原生的几个事件：
hide.bs.tab
show.bs.tab
hidden.bs.tab
shown.bs.tab
上面四个事件可以在原生上切换时触发，但是对于使用我新增的方式新添的tab则无法触发。求解决办法

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

早茶月光 2022-09-08 12:02:49

    $(function() {
        mainHeight = $(document.body).height() - 45;
        $('.main-left,.main-right').height(mainHeight);
        $(".nav-tabs").on("click", "[tabclose]", function(e) {
            id = $(this).attr("tabclose");
            closeTab(id);
        });
        // 注意这里 //////////////////////////////////////////
        $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
            console.log($(e.target));
        })
    });

你在绑定事件的时候 DOM 都还没生成，当然不会触发事件。
改用事件委托的方式，或者在产生那个 <a> 的时候绑定一次事件。

回复收藏 0

~没有更多了~