1
saveCard.addEventListener('click', () => {
    flashcards.insertAdjacentHTML('afterbegin', `
    
    <div class = "flashcard">
        <h2 class = 'Hone' style = "border-top:1px solid red; padding: 15px; margin-top:30px">${question.value}</h2>
        <h2 class = 'Htwo' style = "text-align:center; display:none; color:red">${answer.value}</h2>
    </div>

    `)
})

Вот я создал карточку и теперь мне надо при нажатии на блок Htwo менялся цвет текста, которых находится в Htwo. Как мне навесить событие на блок, который я только что создал?

2 ответа 2

2

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

Для этого надо всего лишь повесить событие на любой родительский элемент (в примерах я вешаю его на body, но обычно можно найти более подходящего родителя).

Для начала, вот так это делается на jquery (за что эту библиотеку и любят - ну или любили когда-то):

$(document.body).on('click', '.Htwo', function(event) {
    $(event.currentTarget).style('color', 'blue');
})

На ванильном JS это делается чуть сложнее, но тоже ничего сложного:

document.body.addEventListener('click', function (event) {
    const target = event.target.closest('.Htwo');
    if (!target) return;

    target.style.color = 'blue';
});
2

Это делается как и при обычном навешивании события. Ищется элемент в DOM дереве и добавляется слушатель через addEventListener.

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

  • либо перед добавлением нового элемента надо будет отключать слушателя с этих классов, а после добавлении вновь всем прикреплять

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

    let div = document.createElement('div');
    div.innerHTML = 'Hello, World!';
    div.onclick = function() {
        alert(111);
    };
    
    let anotherDiv = document.getElementById('content');
    anotherDiv.appendChild(div);
    
11
  • У меня всплывает такая ошибка: Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
    – Roman
    Commented 21 дек. 2021 в 7:08
  • по этому куску я ничего не смогу сказать. ибо я не знаю что вы пишите Commented 21 дек. 2021 в 7:11
  • Ну как бы вы на Htwo навесили обработчик, который должен был сменить display: block;
    – Roman
    Commented 21 дек. 2021 в 7:16
  • если каждый раз навешивать слушателя при добавлении - то события будут накапливаться - это не верно для браузера. При добавлении одного и того же слушателя на один и тот же элемент - слушатель не добавляется. Для NodeJs - верно. Там добавляется
    – Dmytro
    Commented 21 дек. 2021 в 7:49
  • @Дмытрык если добавлять через addEventListener - ещё как добавляется Commented 21 дек. 2021 в 8:15

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.