Почему в js скрипте не срабатывает collapse для динамически созданного элемента?

Question

[Alex]

Есть кнопки, по нажатию которых раскрывается контейнер рядом с ними. Абсолютно по тем же принципам создаем динамически кнопку и контейнер. И вот с ней данный скрипт уже не работает. Т.е. контейнер открывается а действие для
$('[data-toggle="collapse"]').click(
или
$('.collapse').on('shown.bs.collapse'
не срабатывает. А для остальных существующих кнопок - срабатывает.

Comments

[ⓒⓢⓢ]

1. Так может элемента в ДОМе страницы ещё нет?
2. При динамическом создании, мы ведь вешаем обработчики на новую ноду или надеемся на старые?

[Alex]

1. элемент есть, я его визуально вижу. это показатель его присутствия в DOM? или нужно еще что-то сделать?
2. это обработчик для всех нод, универсальный. по идее он одинаково должен видеть и новые и старые ноды.

[ⓒⓢⓢ]

Александр, не понял, что значит универсальный, исходников нет. На примере покажу:
https://codepen.io/anon/pen/NagQEL
На новом элементе, старый обработчик не сработает, чтобы заработало, нужно добавлять свои обработчики для каждого созданного элемента

[Alex]

Имеется в виду, что обрабатывается событие

$('[data-toggle="collapse"]')

. Оно возникает у любой кнопки с атрибутом data-toggle="collapse" при подключенном Бутстрапе.

<button type="button" data-toggle="collapse" data-target="xxx" id="xxx"  aria-expanded="false""></button>

Верно ли я понимаю, что мне нужно как-то извернуться и добавить динамически еще и код обработчика для новой кнопки?

Answer 1

[olegzpr]

Попробуй после создания кнопки добавить ( data-toggle='collapse') через метод .data(), вот ссылка где почитать по теме https://jquery-docs.ru/data/

Comments

[Alex]

Я и так использую data-атрибуты чтобы заработало сворачивание (). Т.е. речь о том, чтобы не прописывать data-атрибуты кнопки как innerHTML, а добавлять динамически как data()?

[olegzpr]

Александр, похоже что-так и надо делать, jquery после динамического создания элемента не знает о его data-аттрибутах

Answer 2

[Александр Соболев]

$('body').on('click', '.collapse', function(){ // и пошла поэзия))