点击子元素获取父元素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。但是，如果我在一个td上添加data-calculation-id={{ calculation.id }}，然后单击它，就可以得到正确的 id。

是否有办法从父元素中获取 id，无论是单击子元素还是父元素？

- Boky

Answer 1

Use e.currentTarget, not target:

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

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

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

var calculation_id = this.dataset.calculationId;

- dfsq

Answer 2

由于您正在使用jQuery，因此可以使用jQuery方法.data()代替：

$('#archive-table').on('click', '[data-archive-row]', function (e) {
     var calculation_id = $(this).data('calculation-id');
     alert(calculation_id)
})

希望这能有所帮助。

$(document).ready(function () {
  $('#archive-table').on('click', '[data-archive-row]', function (e) {
    var calculation_id = $(this).data('calculation-id');

    console.log(calculation_id);
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table id="archive-table" class="table table-hover table-vcenter">
  <thead>
    <tr>
      <th>Make and model</th>
      <th>First registration</th>
    </tr>
  </thead>
  <tbody>
    <tr data-archive-row class="archive-row" data-calculation-id='calculation.id'>
      <td>calculation.first_registration</td>
      <td>calculation.body</td>
    </tr>
  </tbody>
</table>

- Zakaria Acharki

---

这很好（我可能会使用this.dataset），但是理解e.target和e.currentTarget之间的区别仍然很重要。 - dfsq

没错，我认为最好不要混合使用纯JS和jQuery，因为我们可以只用其中一个就能完成任务。 - Zakaria Acharki

Answer 3

检查当前目标上的data-calculation-id，如果未定义，则检查其父级。

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

- Roumelis George

---

你能解释一下 || e.currentTarget.parentElement.dataset['calculationId'] 这部分的含义吗？因为 e.currentTarget 始终是 tr[data-archive-row]。 - dfsq

如果当前目标没有定义data-calculationId，OP要求使用父级的data-calculationId。 - Roumelis George

我认为OP试图解决使用e.target的问题，因为对于TD来说确实会返回undefined，我们需要向上一级。但在您的解决方案中，这是没有意义的，因为currentTarget保证是TR。 - dfsq