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

Question

我有四个<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>

Answer 1

如果您在点击.childBox div 时想要.childBox id，您可以只在.childBox类上挂钩点击事件：

$('.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'));
});

Answer 2

试试这个它应该可以工作

$(".parentBox").on('click', "div.childBox",
     function() {var myId = $(this).attr('id'); });

Answer 3

你可以这样做：

 $('.parentBox').click(function (event) { var id = $($(this).children('div')[0]).attr('id'); console.log(id); });