通过单击子类获取类的父 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>

我想在单击childBoxdiv中的任意位置时将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

如果你想要在点击div 时.childBoxid.childBox你可以将点击事件挂在.childBox类上：

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

编辑：

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

$('.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').click(function (event) {
var id = $($(this).children('div')[0]).attr('id');
console.log(id);
});

Answer 3

试试这个应该可以工作

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