js не добавляется класс элементам, которые были добавлены по кнопке скриптом

Question

Первые 3 элемента списка уже прописаны в html и класс active в них добавляется по нажатию и накидывается нормально, но если элемент добавить через скрипт, который я приложил ниже, то класс active на них не ставится (он должен добавляться .item__wrapper'у). Мне сказали, что нужно делать "Делегирование". Не особо понял что это значит

Код для добавления класса active:



let items = document.querySelectorAll(".item__wrapper");


function removeStyle(element, className) {
    element.forEach((item) => {
        item.classList.remove(className);
    })
}

items.forEach((item) => {
    item.addEventListener('click', () => {
        if (item.classList.contains('active')) {
            item.classList.toggle('active');
        }else {
            removeStyle(items, "active");
            item.classList.add('active');
        }
    })
})

Код для добавления элемента :

let massage = document.querySelector('.input');
let out = document.querySelector('.group__list');



function addGrup(){
    if(massage.value != ''){
        var htmlCode = ` <div class="item__wrapper">
        <li class="list__item">
            <div class="color_list" bgcolor="red"></div>
            <span class="item__text">${massage.value}</span> 
        </li>
    </div>`;
        out.insertAdjacentHTML('beforeend', htmlCode);
 
    }else{
        alert("Поле не заполнено")
    }
    
    
}

Answer 1

Вместе с добавлением элемента нужно привязывать к нему EventListener. Ты же создаешь новорожденный элемент, а требуешь от него знаний об ивенте как у его предшественников))

Кстати, если юзаешь query запросы, то установи jquery, ускорит процесс.

function addGrup(){
    if(massage.value != ''){
        var htmlCode = ` <div class="item__wrapper">
        <li class="list__item">
            <div class="color_list" bgcolor="red"></div>
            <span class="item__text">${massage.value}</span> 
        </li>
        </div>`;
        out.insertAdjacentHTML('beforeend', htmlCode);
    
        item = document.querySelector(".item__wrapper:eq(-1)");
        item.addEventListener('click', () => {
            if (item.classList.contains('active')) {
                item.classList.toggle('active');
            }else {
                removeStyle(items, "active");
                item.classList.add('active');
            }
        });
 
    }else{
        alert("Поле не заполнено");
    }
    
    
}

(не факт, что я 100% правильно написал, так как не особо вникал в твой код, но суть ты понял. Мб коллеги поправят)

И я бы тогда добавление ивента запихнул в функцию, чтобы покрасивше, но это уже детали))

БЛОГ НА HUSL

js не добавляется класс элементам, которые были добавлены по кнопке скриптом

Ответы (1 шт):