如何获取父元素和子元素上的父id，请单击

Question

我有如下代码：

<div id="make" data-make-unique-id="{{ values.unique_id }}">
<div class="d-flex flew-row align-items-center">
<i class="icon-{{ key|lower }}" style="font-size: 19px;"></i>
<div class="text-capitalize">{{ key|lower }}</div>
</div>
<div class="d-flex align-items-center">{{ values.counter }}</div>
</div>

我想捕获id为make的div上的点击事件。我想要获得data-make-unique-id标记值，无论是在id为make的div上还是在一些子级上单击。

我尝试了以下方法：

$(document).on('click', '#make', (e) => {                
const unique_id = $(this).data("make-unique-id");
debugger;
});

但如果它不起作用。

Answer 1

这应该适用于您：-

$("#make").on("click", function(event){
var unique_id = $(this).data("make-unique-id");
});

Answer 2

在id为"make"的元素上添加click监听器。此外，如果您想绑定this，请使用法线函数而不是箭头函数。

请参阅下面的示例代码。

$(document).ready(function() {
$('#make').click(function() {
const unique_id = $(this).data("make-unique-id");
console.log(unique_id);
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="make" data-make-unique-id="2">
<div class="d-flex flew-row align-items-center">
<i class="icon-{{ key|lower }}" style="font-size: 19px;"></i>
<div class="text-capitalize">{{ key|lower }}</div>
</div>
<div class="d-flex align-items-center">{{ values.counter }}</div>
</div>

希望这能解决问题。