Обработчик событий Bootstrap не работает в компоненте Emberjs

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

Вот контрольный список, чтобы попробовать:

1. Вкладки необходимо активировать индивидуально, в соответствии с документами для начальной загрузки . Я ничего не вижу в ваших примерах кода, показывающих, что вкладки были активированы обработчиком click.
2. Обработчики будут прикрепляться только к элементам, которые уже существуют в DOM на момент didInsertElement, поэтому, если вкладки, соответствующие этому селектору, обнаруживаются другим действием (например, открытием модального режима), они не будут работать. Добавьте оператор отладки для проверки DOM во время didInsertElement и поиска вещей, которые вы пытаетесь выбрать.
3. Выполните $('#someTab').tab('show') непосредственно до и после регистрации обработчика, чтобы увидеть, происходит ли что-либо
4. Вам не хватает где-нибудь e.preventDefault(), как в обработчике кликов? Поскольку вкладки являются якорными тегами, иногда наблюдается странное поведение.

Я настоятельно рекомендую использовать ember-bootstrap поверх обычной Bootstrap. Слушатели JQuery замедляют работу вашего приложения, а внесение изменений в DOM напрямую приведет к сбою в граничных условиях или приведет к неожиданному выходу из строя других частей вашего приложения.

Этот ответ применяется по крайней мере из версий 1.13 и был написан по состоянию на 3.1