jquery - 通过单击子类获取类的父ID

我有四个<div>容器，如下所示：

 <div class="parentBox">
  <div class="childBox" id="20">
      <div>some content with in this div</div>
      <div>another div with more sontent</div>
  </div>
</div>

我想在childBox div中的任何位置单击时将childBox id放入jQuery变量中。我尝试了以下方法，这使我undefined

 $('.parentBox').click(function (event) {
    var id = $(this).attr('id');
    console.log(id);
});

还尝试了这个给我父母不是一个功能

var id = $(this).parent().attr('id');

并尝试了这个，这在控制台日志中给了我空白

var id = event.target.id;

有人可以帮忙吗？

     $('.parentBox').click(function (event) {
        var id = $(this).attr('id');
        console.log(id);

        //does not work
        console.log($(this).parnet().attr('id'));

        //also does not work
        console.log(event.target.id);
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parentBox">
      <div class="childBox" id="20">
          <div>some content with in this div</div>
          <div>another div with more sontent</div>
      </div>
    </div>

最佳答案

如果在单击.childBox div时需要.childBox id，则可以仅钩住.childBox类上的click事件：

$('.childBox').click(function (event) {
    var id = $(this).attr('id');
    console.log(id);
});

编辑：

如果要从.childBox事件访问.parentBox，可以执行以下操作：

$('.parentBox').click(function (event) {
    var id = $(this).find('.childBox').attr('id');
    console.log(id);
});

动态添加子级时，最好将事件挂接到父级或文档对象上，如下所示：

$(document).on('click', '.childBox' , function() {
  console.log($(this).attr('id'));
});