Getting parent id on child click

Question

I am trying to get the parent id when clicked with jquery.

My django template is as follows:

<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>

And my js looks like this:

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

How can I get a dataset['calculationId']parent, regardless of whether I clicked on a child.

With my code, I get undefined in the message. But if, for example, I add tddata-calculation-id={{ calculation.id }} to one , and if I then click on it, then I will get the correct identifier.

Is there a way to get the identifier from the parent, regardless of whether it clicked on the child or on the parent?

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)
  })
});

, e.currentTarget TR, , TR, TD - .

- this, TR :

var calculation_id = this.dataset.calculationId;

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>

Hide result

Answer 3

Check the data computation identifier on the current target, and if it is undefined, check its parent.

<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>