javascript - 如何获取任意父div被点击的子div的id值

Question

假设我有一个父 div，它包含另外两个使用 jQuery 动态创建的 div。当我点击第一个 div 时，如果我点击第二个 div，它会提醒或控制它的 id 值，然后它会显示第二个 div id 属性值

for (i=0; i < 3; i++){
       content = "<div class='dataToAppend' id="+i+" style='cursor:pointer; margin:30px; display:inline-block;'>"
       content += '<img id='+i+' src='+i+' >'               
       content += "</div>"
       $(".data").append(content)
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="data"></div>

在这个片段中，当我点击一张图片时，我希望它控制它的 id 属性

Answer 1

你可以绑定(bind)一个delegated click event到图片:

for (i = 0; i < 3; i++) {
  content = "<div class='dataToAppend' id='div" + i + "' style='cursor:pointer; margin:30px; display:inline-block;'>"
  content += '<img id=' + i + ' src=' + i + ' >'
  content += "</div>"
  $(".data").append(content)
}

$(".data").on('click', 'img', function() { // use a delegated event on the image
  console.log(this.id); // this is the image id

  console.log($(this).parent().attr('id')); // this is the div id
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="data"></div>

请注意，id 应该是唯一的，并且您当前创建的 div 和图像 id 相同，我在上面进行了编辑，因此它们不同