Question

在我的组件的didInsertElement（）方法中，我为Bootstraps的选项卡组件注册了事件处理程序：

didInsertElement() {
    this._super(...arguments);

    console.log('didInsertElement....');
    console.log(this.$("a[data-toggle='tab']"));

    this.$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
        console.log('TAB SHOWN....');
        console.log(e);
    });
}

但是，我的处理程序没有执行。我在浏览器的控制台上复制了相同的处理程序代码，它可以工作这似乎只是在Bootsrap选项卡的情况下。我的控制台消息的外观确认didInsertElement（）工作正常。

Answer 1

这是一个尝试的清单：

根据the docs for bootstrap，需要单独激活标签。我的代码示例中没有显示任何内容，表明已使用click处理程序激活了选项卡。
处理程序将仅附加到didInsertElement时DOM中已存在的元素，因此如果匹配该选择器的选项卡被另一个操作（如打开模式）显示，则它们将无法工作。添加一个调试语句以在didInsertElement时检查DOM并查找您要选择的内容。
在注册处理程序之前和之后执行$('#someTab').tab('show')以查看是否有任何事情发生
您是否在某个地方错过了e.preventDefault()，就像点击处理程序一样？由于制表符是锚标记，有时会出现一些奇怪的行为。

我强烈建议在常规Bootstrap上使用ember-bootstrap。 JQuery监听器会降低您的应用程序速度，并且直接对DOM进行修改将在边缘条件下失败或导致应用程序的其他部分以意外方式中断。

此答案适用于至少1.13版，并且是从3.1

Bootstrap的事件处理程序无法在Emberjs组件中运行

1 个答案: