在儿童点击上获取父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']如果我点击了孩子,我怎么能得到父母的.

使用我的代码,我在警报中未定义.但是,如果我例如添加data-calculation-id={{ calculation.id }}到一个td,如果我然后点击它然后我得到正确的ID.

有没有办法从父母那里获得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)
  })
});

因为你委托事件,e.currentTarget将是TR元素,目标将是你在这个TR中点击的任何东西,可能是TD或其中的东西.

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

var calculation_id = this.dataset.calculationId;