子のクリックで親の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 }}を1つに追加するのであれば、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またはそれに何かの中にクリックしたものは何でもなります。

var calculation_id = this.dataset.calculationId; 

Answer 2

あなたはjQueryのを使用しているので、あなたが使用することができ.data()代わりにjQueryのメソッド：：

別の簡単な解決策は、イベントハンドラで常にTRを指すようになりますよう単にthisを使用することです

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

これが役に立ちます。現在のターゲットにして、その親をチェックし、未定義であるかのデータ計算-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>

Answer 3

チェック。

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