Имеется проект на Yii2 в котором есть интерфейс с вложенными друг в друга коллапсами. Ниже привожу код:
index.php
:
<?= Collapse::widget([
'items' => [
[
'label' => 'Collapse1',
'content' => $this->render('1'),
],
[
'label' => 'Collapse2',
'content' => $this->render('2'),
],
[
'label' => 'Collapse3',
'content' => $this->render('3'),
],
]
]); ?>
1.php
:
<?= Collapse::widget([
'items' => [
[
'label' => 'Collapse1',
'content' => $this->render('1_1'),
],
[
'label' => 'Collapse2',
'content' => $this->render('1_2'),
],
[
'label' => 'Collapse3',
'content' => $this->render('1_3'),
],
]
]); ?>
И так далеее...
Выглядит это следующим образом:
Для реализации некоторого функционала мне требуется отслеживать открытие-закрытие коллапсов на странице интерфейса. Для этого я решил использовать события предоставленные разработчиками bootstrap3:
shown.bs.collapse
и hidden.bs.collapse
.
Итак, для тестирования я набросал следующий скрипт:
var collapse = $('.panel-collapse .collapse');
collapse.on('shown.bs.collapse', function ()
{
var active = $(this).attr('id');
console.log('Showing collapse with ' + active + ' id');
});
collapse.on('hidden.bs.collapse', function ()
{
var active = $(this).attr('id');
console.log('Hidden collapse with ' + active + ' id');
});
Соответственно, я ожидаю увидеть следующее: при первоначальной загрузке сраницы все коллапсы закрыты. Далее, если я открываю или закрываю коллапс в консоль выводится соответсвующее сообщение.
Проблемы с которыми я столкнулся:
- При первоначальной загрузке страницы, когда все коллапсы еще закрыты, у меня срабатывает событие
shown.bs.collapse
и в консоль выводится сообщение:Showing collapse with #w1-collapse3 id
говорящее о том, что отрисовался коллапс #2. - Когда я открываю самый внешний коллапс (на рисунке #1) - я не получаю уведомление в консоль, следовательно событие
shown.bs.collapse
не срабатывает. Когда я открываю внутренний коллапс (на рисунке #3) срабатывает событие
shown.bs.collapse
и в консоль выводится два сообщения говорящих о том, что отрисовался коллапсы #2 и #3, хотя коллапс #2 и так уже был отрисован.Showing collapse with #w0-collapse1 id Showing collapse with #w1-collapse3 id
Собственно вопрос, почему так происходит, и как это вылечить?
event.target
, это действительно объясняет поведение с всплытием событий. Я добавил следующую проверку условияif (this === event.target)
и это позволило решить проблему с лишним отображением событий в консоли. Но я до сих пор не могу понять, почему у меня не срабатывает событиеshown.bs.collapse
в том случае когда я открываю любой из первых внешних коллапсов(проблема #2 в моем вопросе)?