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。

有没有办法从父母那里获取身份证明，无论是点击儿童还是父母？

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

希望这有帮助。

＆＃13;

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

＆＃13;

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

＆＃13;

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>

在儿童点击上获取父ID

3 个答案: