引导选项卡显示事件仅在第一次触发，而不会在第二个或以后的选项卡开关上触发

Bootstrap tabs shown event only fires the first time and not on second or later tab switches

本文关键字：选项 第二个 开关 第一次 事件 显示      更新时间：2023-09-26

我使用的是 Bootstrap 版本 3.3.5，并且有一个带有两个选项卡的视图，可以在两个内容窗格之间切换。我设置了一个侦听器，以便在选项卡切换到"评论"窗格时发生。它第一次触发。但是，如果我再次（或多次）在选项卡之间来回切换，该事件将永远不会再次触发。

$('#commentsTab').on('shown.bs.tab', function (e) {
   console.log("do stuff here");
});

这是选项卡 html：

<ul class="nav nav-pills side-tabs" role="tablist">
   <li class="side-tab hidden-md hidden-lg" ng-class="oneColumn ? 'active' : ''" role="presentation">
      <a href="" data-target="#topcard" data-toggle="tab" role="tab">{{title}}</a>
   </li>
   <li class="side-tab" ng-class="oneColumn ? '' : 'active'" role="presentation">
      <a href="" data-target="#notes" data-toggle="tab" role="tab"><i class="fa fa-clone"></i>Notes</a>
   </li>
   <li role="presentation" class="side-tab">
      <a id="commentsTab" class="comments-tab" href="" data-target="#comments" data-toggle="tab" role="tab"><i class="fa fa-comment-o"></i>Feedback</a>
    </li>
</ul>

有人知道如何使它工作，以便每次切换到选项卡时我都能可靠地获取事件？

经过更多的调查，我想出了问题所在 - 发布以防它对任何人有帮助......

我在选项卡元素上有一个角度指令，该指令也注册了相同的选项卡显示事件。我忘记了它在第一次之后从事件中取消注册（unbind（））。

显然，此行与所显示事件的所有注册函数解除绑定，而不仅仅是其自身。 

elem.unbind('shown');

因此，我将其重组为使用命名函数并仅取消绑定该函数（如本答案所示）：

        var unbind = function (elem) {
            elem.unbind('shown', scope.scrollFn);
        };
        scope.scrollFn = function (elem) {
            //do stuff here
            unbind(elem);
        };
        elem.on('shown.bs.tab', scope.scrollFn);

现在取消绑定不会影响我在原始帖子中为显示的事件注册的其他函数。

相关文章：