The created new div is not shown ID

Question

I made a clicking divs. By clicking on the first two dives I get alert (this.id) - some_id1 or some_id2 and this is fine. Clicking the Add Div button creates a new div some_id3, but clicking the new div does not show the alert (this.id), it does not register. I can not figure out why. Any idea?

<style> 
#some_id1{
  width: 50px;
  height: 50px;
  margin: 10px;
  float: left;
  background-color: red;
}

#some_id2{
  width: 50px;
  height: 50px;
  margin: 10px;
  float: left;
  background-color: red;
}

#some_id3{
  width: 50px;
  height: 50px;
  margin: 10px;
  float: left;
  background-color: red;
}
#parent{
  width: 350px;
  height: 150px;
  margin: 10px;
  padding: 10px;
  background-color: blue;
}

#parent2{
  width: 150px;
  height: 150px;
  margin: 10px;
  padding: 10px;
  background-color: blue;
}
</style>

<button type="button" onclick="AddDiv()" >Add Div</button>

<div  id="parent">
<div  id="some_id1"></div>
<div  id="some_id2"></div>
</div>

<div  id="parent2"></div>

<script>
var div = document.getElementsByTagName("div");
var divCount = div.length;
var clickedDivId

for (var i = 0; i < divCount; i += 1) {
    div[i].onclick = function(e) {
        event.stopPropagation();
        clickedDivId = this.id;
        alert(this.id);
    };
}

function AddDiv(){
  var y = document.createElement('div');
  y.id = 'some_id3';
  document.getElementById("parent").appendChild(y);
}        
</script>

Yes, In mentioned previous answer contain more details about this problem. I simply edit your code to this. `function dynamicAlert(e) { clickedDivId = this.id; alert(this.id); } function AddDiv(){ var y = document.createElement('div'); //y.id = 'some_id3'; y.setAttribute("id", "some_id3"); document.body.appendChild(y); y.onclick = dynamicAlert }` — Emalsha Rasad, May 15 '19 at 10:02
Thank you for your reply. The next thing that has appeared on the new div some_id3 does not happen event.stopPropagation (); If I add the parent div and I create a new div, I register both divs. When I click on parent, some_id1 and some_id2 alert (this.id) only show their ids. If I click on the new div some_id3 shows me alert some_id3 and parent. How can I avoid this to show only some_id3? — aldin_abdagic, May 15 '19 at 10:24
After you create new div element "some_id3" it doesn't get event binding. So you have to force that event bind to get your result. Now when you click on new div, its actually have parent handlers only. So when you create new element bind your function and add event.stopPropagation(). ex : `function AddDiv(){ var y = document.createElement('div'); y.id = 'some_id3'; document.getElementById("parent").appendChild(y); y.addEventListener('click', function (e) { event.stopPropagation(); clickedDivId = this.id; alert(this.id); }, false); } ` — Emalsha Rasad, May 15 '19 at 15:13
Thank you very much, i am a beginner in javascript so i miss a lot of it .. How can I mark a comment as an answer? — aldin_abdagic, May 15 '19 at 17:38
https://stackoverflow.com/questions/56181151/add-ondrop-ondragover-to-the-new-created-element-not-working Can you help me with this example? — aldin_abdagic, May 18 '19 at 06:06

Syed mohamed aladeen · Accepted Answer · 2019-05-15T10:26:35.647

1

You need to add event listener for the dynamically created elements.

var div = document.getElementsByTagName("div");
var divCount = div.length;
var clickedDivId
for (var i = 0; i < divCount; i += 1) {
    div[i].onclick = function(e) {
        clickedDivId = this.id;
        alert(this.id);
    };
}

function AddDiv(){
console.log(i);
  var y = document.createElement('div');
 // event.stopPropagation();
 
  y.id = 'some_id'+(i+1);
  y.addEventListener('click', function (e) {
    clickedDivId = this.id;
     alert(this.id);
  }, false);


  document.body.appendChild(y);
  i+=1;
}

div[id^=some_id] {
    width: 50px;
  height: 50px;
  margin: 10px;
  float: left;
  background-color: red;
}

<button type="button" onclick="AddDiv()" >Add Div</button>

<div  id="some_id1"></div>
<div  id="some_id2"></div>

edited May 15 '19 at 10:26

answered May 15 '19 at 09:53

Syed mohamed aladeen

6,507
4
32
59

Thank you for your reply. The next thing that has appeared on the new div some_id3 does not happen event.stopPropagation (); If I add the parent div and I create a new div, I register both divans When I click on parent, some_id1 and some_id2 alert (this.id) only show their ids. If I click on the new div some_id3 shows me alert some_id3 and parent. How can I avoid this to show only some_id3? – aldin_abdagic May 15 '19 at 10:16
@aldin_abdagic code updated check now – Syed mohamed aladeen May 15 '19 at 10:26
Mohamed Aladeen Thank you for your reply. I upgrade to code and added parent. If I add a new div some_id3 and click on it, it gets alert from some_id3 and parent. I should just get it from some_id3 and not from parent. I hope you understand me – aldin_abdagic May 15 '19 at 11:07
I added event.stopPropagation (); because if you move then to some_id1 and to some_id2 I get a parent alert. I want to be clicking only one element. – aldin_abdagic May 15 '19 at 11:15
https://stackoverflow.com/questions/56181151/add-ondrop-ondragover-to-the-new-created-element-not-working Can you help me with this example? – aldin_abdagic May 18 '19 at 06:04

The created new div is not shown ID

1 Answers1