Блог

Я загружаю карты и там модалы динамически, и проблема, с которой я сталкиваюсь, заключается в том, что динамически добавляемые карты не запускают динамически добавляемые модалы. Карты вот такие

 data.forEach(eve => {
         console.log(eve.data());
         event = eve.data();
         pastEventCards =`
          <li class="cards_item">
            <div class="card">
                <div class="card_image">
                    <img src="images/posters/cpp_2021.jpeg" />
                </div>
                <div class="card_content card-body d-flex flex-column">
                    <h2 class="card_title">${event.title}</h2>
                    <p class="card_text">

                    </p>
                    **<button data-modal-trigger="past-event-modal-${event.eventNo}" class="mt-auto demo__btn demo__btn--secondary">
                        Read More
                    </button>**
                </div>
            </div>
         </li>
         `
        pastEventModals =`
        <div class="modal" data-modal-name="past-event-modal-${event.eventNo}">
        <div class="modal__dialog">
            <button class="modal__close" data-modal-dismiss>×</button>
            <header class="modal__header">
                <h2 class="modal__title">${event.title}</h2>
            </header>
            <div class="modal__content">
                <h4 class="modal_description">Description</h4>
                </p>
                <p>${event.description}</p>
                <p class="modal_description">
                    ${event.date}
                </p>
                <p class="modal_description">Attendees : ${event.attendee}
                </p>
                <p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-modal-dismiss>Close</button>
            </div>
        </div>
    </div>
        `
     });

    cardsList.innerHTML = pastEventCards ;
    modalList.innerHTML = pastEventModals ; 
 

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

**РЕДАКТИРОВАТЬ :: **

Кнопка, которая запускает модальный, находится внутри этой ** ** переменной pastEventCards, а модальный находится в pastEventModals, и когда я использую «data-modal-trigger = «что-то»», это вызовет модальный с модальным именем «что-то», верно ? Так что этого не происходит. Если я не добавлю эти модалы и триггерные карты динамически и не добавлю их в html-шаблон, то все будет нормально, но после динамического добавления это не сработает