时间戳

首页 > 解决方案 > 创建的新 div 未显示 ID

html - 创建的新 div 未显示 ID

问题描述

我做了一个点击div。通过单击前两次潜水，我得到警报（this.id） - some_id1 或 some_id2，这很好。单击 Add Div 按钮会创建一个新的 div some_id3，但单击新的 div 不会显示警报 (this.id)，它不会注册。我不知道为什么。任何想法？

<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>

标签： htmlelementoncreate

解决方案

您需要为动态创建的元素添加事件侦听器。

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>

推荐阅读