Estou a fazer uma experiência em javascript que ao clicar num determinado elemento com uma certa classe vamos adicionar um novo elemento com a mesma classe, sempre que clicar deveria aparecer um novo elemento.
var my_divs = document.getElementsByClassName('my-div');
for (var i = 0; i < my_divs.length; i++) {
my_divs[i].addEventListener('click', function() {
var next_id = my_divs.length + 1;
document.body.innerHTML += '<div id="div' +next_id+ '" class="my-div"></div>';
//console.log(next_id);
});
}
.my-div {
width:20px;
height:20px;
}
.my-div:nth-child(odd) {
background-color:red;
}
.my-div:nth-child(even) {
background-color:blue;
}
<div id="div1" class="my-div">
</div>
Como se pode ver, funciona, mas só uma vez. Eu até compreendo que o clique na que aparece dinamicamente não faça nada porque o evento não chegou a ser associado à nova div. Mas mesmo assim, porque é que o clique na primeira só faz efeito uma vez? E como faria para obter aquilo que quero? Sempre que clicar em qualquer (.my_div
), gerada dinamicamente ou não aparecer outra?