创建的新 div 未显示 ID [重复]答案

【问题标题】：The created new div is not shown ID [duplicate]创建的新 div 未显示 ID [重复]
【发布时间】：2019-05-15 09:49:18
【问题描述】：

我做了一个点击 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>

【问题讨论】：

是的，在前面提到的答案中包含有关此问题的更多详细信息。我只是将您的代码编辑为此。 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 }
感谢您的回复。接下来出现在新 div some_id3 上的事情不会发生 event.stopPropagation();如果我添加父 div 并创建一个新 div，我会注册两个 div。当我点击父母时， some_id1 和 some_id2 警报（this.id）只显示他们的 id。如果我单击新的 div some_id3 会显示警报 some_id3 和父级。我怎样才能避免这种情况只显示 some_id3？
创建新的 div 元素“some_id3”后，它不会获得事件绑定。因此，您必须强制该事件绑定才能获得结果。现在，当您单击新 div 时，它实际上只有父处理程序。因此，当您创建新元素时，请绑定您的函数并添加 event.stopPropagation()。例如：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); }
非常感谢，我是 javascript 的初学者，所以我错过了很多 .. 如何将评论标记为答案？
stackoverflow.com/questions/56181151/…你能帮我举个例子吗？

标签： html element oncreate

【解决方案1】：

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

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>

【讨论】：

感谢您的回复。接下来出现在新 div some_id3 上的事情不会发生 event.stopPropagation();如果我添加父 div 并创建一个新 div，我会注册两个 div 当我单击父级时，some_id1 和 some_id2 警报（this.id）只显示它们的 id。如果我单击新的 div some_id3 会显示警报 some_id3 和父级。我怎样才能避免这种情况只显示 some_id3？
@aldin_abdagic 代码更新检查现在
Mohamed Aladeen 感谢您的回复。我升级到代码并添加了父级。如果我添加一个新的 div some_id3 并单击它，它会从 some_id3 和父级获得警报。我应该从 some_id3 而不是从父母那里得到它。希望你能理解我
我添加了 event.stopPropagation();因为如果您移动到 some_id1 和 some_id2 我会收到家长警报。我只想点击一个元素。
stackoverflow.com/questions/56181151/… 你能帮我举个例子吗？