JavaScript - obsługa dynamicznie dodawanych przycisków

0

Cześć. Od dłuższego czasu staram się zrobić pewną aplikację (To Do App) na zaliczenie. Natrafiłem na pewien problem, którego nie potrafię rozwiązać. Chodzi o to, że po kliknięciu w przycisk dodawana jest kolumna wraz z kolejnym przyciskiem, który ma mieć za zadanie dodać element w tej kolumnie. Nie potrafię obsłużyć tych dynamicznie dodawanych przycisków.
Dodam jeszcze, że w późniejszym czasie chciałbym dodać opcję usuwania kolumn i poszczególnych elementów w kolumnie.
Poniżej wklejam link do skróconego do minimum opisania problemu kodu i serdecznie dziękuję za każdą pomoc:
https://jsbin.com/fawakomuse/edit?html,css,js,output

0

Dodajesz eventListener podobnie jak to zrobiłeś dla buttona, który dodaje kolumny.

0

W jaki sposób, skoro każdy z dodawanych buttonów jest dokładnie taki sam

0

Każdy ma tę samą klasę, dzięki czemu możesz wybrać wszystkie i na każdym z nich dodajesz eventListener.

P.S. Do rozróżnienia buttonów pomiędzy sobą możesz dodać jakiś numerek jako klasę.

0

Ok, z tym że każdy button ma dodawać element w kolumnie w której się znajduje. A jeśli dodam dokładnie taką samą funkcję na każdy button to element będzie dodawał się w pierwszej kolumnie (Tak mi się przynajmniej wydaje) :P

1

Jeżeli dodasz klasę z numerem kolumny poza klasą btn to łatwo dowiesz się, który btn został kliknięty. Poza tym możesz bawić się z event.target i z butttona przejść na parent czyli właściwą kolumnę.

0

const newColumnButton = document.getElementById('newColumnButton');
let colCount = 0;

newColumnButton.addEventListener("click", newColumn);

function newColumn() {
    const el = document.createElement("div");
    let newDiv = '';
    newDiv += `<div class="column ${colCount}">`;
    newDiv += "<button class='btn' onclick='newTask(this)'>New Task</button>";
    newDiv += '</div>';
    el.innerHTML = newDiv;
    newColumnButton.before(el);
    colCount += 1;
}

function newTask(button) {
  const currCol = button.parentElement.className;
  // reszta kodu
}

0
    newDiv += "<button class='btn' onclick='newTask(this)'>New Task</button>";

Jedna, taka prosta linijka i wszystko działa jak należy. Bardzo dziękuję Wam za pomoc!

1 użytkowników online, w tym zalogowanych: 0, gości: 1