javascript - 在子点击时获取父 ID

Question

我正在尝试使用 jquery 在点击时获取父 ID。

我的 django 模板如下:

<table id="archive-table" class="table table-hover table-vcenter">
    <thead>
       <tr>
          <th>Make and model</th>
          <th>First registration</th>
       </tr>
    </thead>
    <tbody>
       {% for calculation in calculations %}
          <tr data-archive-row class="archive-row" data-calculation-id={{ calculation.id }}>
               <td>{{ calculation.first_registration }}</td>
               <td>{{ calculation.body }}</td>
           </tr>
       {% endfor %}
     </tbody>
</table>

而我的js如下:

<script>
    $(document).ready(function () {
        $('#archive-table').on('click', '[data-archive-row]', function (e) {
            var calculation_id = e.target.dataset['calculationId'];
            alert(calculation_id)
        })
    });
</script>

无论我是否点击子项，如何获取父项的 dataset['calculationId']。

通过我的代码，我得到了 undefined 警报。但是，例如，如果我将 data-calculation-id={{ calculation.id }} 添加到一个 td 中，然后单击它，那么我就得到了正确的编号。

有没有什么办法可以从父级获取id，无论点击的是子级还是父级？

Answer 1

使用e.currentTarget，而不是target:

$(document).ready(function() {
  $('#archive-table').on('click', '[data-archive-row]', function(e) {
    var calculation_id = e.currentTarget.dataset.calculationId;
    alert(calculation_id)
  })
});

由于您正在委托(delegate)事件，e.currentTarget 将是 TR 元素，目标将是您在此 TR 中单击的任何内容，可能是 TD 或其中的其他内容。

另一个简单的解决方案是简单地使用 this 因为它将在事件处理程序中始终指向 TR:

var calculation_id = this.dataset.calculationId;