1

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?

1 Resposta 1

1

O problema é que += é o mesmo que document.body.innerHTML = document.body.innerHTML + resto, ou seja re-escreve todo o HTML e por isso rompe os auscultadores de eventos.

Para fazeres isso funcionar para qualquer elemento (criado depois ou não) precisas de um delegador, e nesse caso podes usar .appendChild() ou re-escrever o HTML todo como estavas a fazer. Eu prefiro usar .appendChild(), usando += no body.innerHTML é violento e pode estragar código em outras partes do DOM.

Exemplo usando delegação:

var ids = 2;
var minhaClasse = 'my-div';
window.addEventListener('click', function(e) {
    var el = e.target;
    if (!el.classList.contains(minhaClasse)) return;
    var div = document.createElement('div');
    div.classList.add(minhaClasse);
	div.id = ids++;
    document.body.appendChild(div);
});
.my-div {
    margin: 20px;
    height: 20px;
    width: 20px;
    background-color: #ddf;
}
<div id="div1" class="my-div"></div>

jsFiddle: https://jsfiddle.net/5pdvxp9q/

Outra maneira mais local seria assim:

function addDiv() {
    var div = document.createElement('div');
    div.classList.add(minhaClasse);
    div.id = ids++;
    div.addEventListener('click', addDiv);
    document.body.appendChild(div);
}
document.querySelector('.my-div').addEventListener('click', addDiv);

jsFiddle: https://jsfiddle.net/5pdvxp9q/2/

6
  • 1
    Obrigado @Sergio. É isto mesmo... Aceito já em poucos mins
    – Miguel
    Commented 30/05/2016 às 9:48
  • Em vez de reescrever tudo, mais vale só adicionar claro.
    – Miguel
    Commented 30/05/2016 às 9:49
  • Haa tu adicionas logo o evento à window e só depois especificas o elemento ao certo. É o mesmo que $(window).on('click', '.my-div', function() { ... }) certo?
    – Miguel
    Commented 30/05/2016 às 9:51
  • Reparei agora num pequeno erro, no seu... Talvez deva editar, a segunda div, a primeira a ser gerada vem com id=0, deveria vir com id=2
    – Miguel
    Commented 30/05/2016 às 10:23
  • @Miguel exato, com jQuery seria esse o código de delegação. Juntei mais info à resposta.
    – Sergio
    Commented 30/05/2016 às 10:56

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .