Как добавить действия новым создаваемым карточкам?

https://codepen.io/eevgenushka/pen/KKxMzoP

Как добавить действия новым создаваемым карточкам?

Я только учусь, так сложно разобраться. Уже обрадовалось,что все работает, а тут на новые карточки никаких реакций((
https://codepen.io/eevgenushka/pen/KKxMzoP

Как добавить действия новым создаваемым карточкам?

HardBot, прошу прощения. не судите строго, я новичок тут.
Прикладываю код.

const renderCard = (cards) => {
cardsContainer.prepend(createCard(cards));
};

popupFormTypePlace.addEventListener('submit', (evt) => {
evt.preventDefault();

renderCard({
name: popupInputTypePlace.value,
link: popupInputTypeLink.value,
});

evt.target.reset();
closePopup(popupTypePlace);
});

const createCard = (cards) => {
const newCard = cardsTemplate.cloneNode(true);
const cardName = newCard.querySelector('.element__title');
const cardImage = newCard.querySelector('.element__item');
cardName.textContent = cards.name;
cardImage.setAttribute('src', cards.link);
cardImage.setAttribute('alt', cards.link);
return newCard
};

initialCards.forEach((cards) => {
const newCard = createCard(cards)
cardsContainer.append(newCard)
});

const likeButtons = document.querySelectorAll('.element__button');
likeButtons.forEach((likeButton) => {
likeButton.addEventListener('click', toggleLike);
});

function toggleLike (evt) {
evt.target.classList.toggle('element__button_active');
};

const deleteButtons = document.querySelectorAll('.element__basket');
deleteButtons.forEach((deleteButton) => {
deleteButton.addEventListener('click', elementDelete);
})
function elementDelete (evt) {
evt.target.closest('.element').remove();
};

const cardPictures = document.querySelectorAll('.element__item');
cardPictures.forEach((cardPicture) => {
cardPicture.addEventListener('click', openPicture);
})
function openPicture (evt) {
openPopup(popupTypePicture);
const imageSrc = evt.target.getAttribute('src');
const imageAlt = evt.target.getAttribute('alt');
const card = evt.target.closest('.element');
const imageTitle = card.querySelector('.element__title').textContent;

const popupPicture = popupTypePicture.querySelector('.popup__picture');
const popupName = popupTypePicture.querySelector('.popup__name');

popupPicture.src = imageSrc;
popupPicture.alt = imageAlt;
popupName.textContent = imageTitle;
};

Как добавить действия новым создаваемым карточкам?

Делала через forEach. Прикладываю код.

const renderCard = (cards) => {
cardsContainer.prepend(createCard(cards));
};

popupFormTypePlace.addEventListener('submit', (evt) => {
evt.preventDefault();

renderCard({
name: popupInputTypePlace.value,
link: popupInputTypeLink.value,
});

evt.target.reset();
closePopup(popupTypePlace);
});

const createCard = (cards) => {
const newCard = cardsTemplate.cloneNode(true);
const cardName = newCard.querySelector('.element__title');
const cardImage = newCard.querySelector('.element__item');
cardName.textContent = cards.name;
cardImage.setAttribute('src', cards.link);
cardImage.setAttribute('alt', cards.link);
return newCard
};

initialCards.forEach((cards) => {
const newCard = createCard(cards)
cardsContainer.append(newCard)
});

const likeButtons = document.querySelectorAll('.element__button');
likeButtons.forEach((likeButton) => {
likeButton.addEventListener('click', toggleLike);
});

function toggleLike (evt) {
evt.target.classList.toggle('element__button_active');
};

const deleteButtons = document.querySelectorAll('.element__basket');
deleteButtons.forEach((deleteButton) => {
deleteButton.addEventListener('click', elementDelete);
})
function elementDelete (evt) {
evt.target.closest('.element').remove();
};

const cardPictures = document.querySelectorAll('.element__item');
cardPictures.forEach((cardPicture) => {
cardPicture.addEventListener('click', openPicture);
})
function openPicture (evt) {
openPopup(popupTypePicture);
const imageSrc = evt.target.getAttribute('src');
const imageAlt = evt.target.getAttribute('alt');
const card = evt.target.closest('.element');
const imageTitle = card.querySelector('.element__title').textContent;

const popupPicture = popupTypePicture.querySelector('.popup__picture');
const popupName = popupTypePicture.querySelector('.popup__name');

popupPicture.src = imageSrc;
popupPicture.alt = imageAlt;
popupName.textContent = imageTitle;
};