Question

我正在使用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>

任何人都知道如何使这项工作，以便我每次切换到标签时可靠地获取事件？

Answer 1

经过多一点调查后，我发现了问题 - 发布以防万一......

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

显然，这一行与所显示事件的所有已注册函数无关，而不仅仅是本身。

elem.unbind('shown');

因此，我重新构建它以使用命名函数并仅取消绑定该函数（如此answer）：

        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);

现在解除绑定不会影响我在原始帖子中为显示的事件注册的其他功能。

显示的引导选项卡事件仅在第一次触发而不在第二次或更晚的选项卡切换时触发

1 个答案: