Hice este pequeño código hoy:

http://codepen.io/Poptocrack/pen/bgpEbr

document.getElementById("pays" + nb_items).onclick = function () {
  var div = document.createElement('div');
  div.className = 'tata';
  div.setAttribute("id", "pays" + ++nb_items);
  document.getElementById("country").appendChild(div);
};

Y tengo un problema JS, creo.

Cuando hago clic en un div # 1 crea uno nuevo div # 2 y me gustaría hacer clic en el div # 2 para crear un div # 3 y así sucesivamente.

En realidad, los nuevos divs se agregan solo si hago clic en el div # 1. ¿Alguna idea de qué hice mal? ¡Gracias!

0
Poptocrack 11 ene. 2017 a las 23:37

3 respuestas

La mejor respuesta

Puede vincular el evento al país del elemento primario en lugar de agregar a cada div

Mira este fragmento

var nb_items = 1;

window.onload = function() {
  var colors = ["black", "orange", "yellow"]
  document.querySelector('.country').addEventListener('click', function(event) {
    if (event.target.nodeName === "DIV") {
      var div = document.createElement('div');
      div.className = 'tata';
      div.setAttribute("id", "pays" + ++nb_items);
      div.style.backgroundColor = colors[nb_items];
      document.getElementById("country").appendChild(div);
    }
  })

};
html {
  height: 100%;
}
body {
  min-height: 100%;
  margin: 0;
}
.top-bar {
  background-color: blue;
  min-height: 16vh;
}
.country {
  display: flex;
  justify-content: center;
  min-height: 70vh;
  width: 100%;
}
.footer {
  position: absolute;
  background-color: green;
  height: 14vh;
  width: 100%;
}
.toto {
  background-color: coral;
  width: 100%;
}
.tata {
  width: 100%;
}
<body>
  <div class="top-bar">
    <!-- Local clock -->
  </div>
  <div id="country" class="country">
    <div id="pays1" class="toto">
    </div>
    <!-- pays -->
  </div>
  <div class="footer">
  </div>
</body>

Espero que esto ayude

1
Geeky 11 ene. 2017 a las 20:45

Debe agregar eventListener para los div recién creados

Crear una función listener separada y vincularla a cada div creado dinámicamente;

var listener = function () {
  var div = document.createElement('div');
  div.className = 'tata';
  div.setAttribute("id", "pays" + ++nb_items);
  div.onclick = listener;
  document.getElementById("country").appendChild(div);
};

codepen actualizado

1
Jyothi Babu Araja 11 ene. 2017 a las 20:44

No está agregando y eventListener al nuevo div creado

var div = document.createElement('div');
div.className = 'tata';
div.setAttribute("id", "pays" + ++nb_items);
div.addEventListener("click",function(){
 //create the div#3 here
 });
document.getElementById("country").appendChild(div);
0
Roljhon 11 ene. 2017 a las 20:43