javascript - クリックイベントから正しい要素を取得する

Question

次のような DOM ツリーがあります。

<div class="like-bttn" data-answer-id="{{answer.id}}">
  <div class="count>{{ answer.like_score }}</div>
  <div class="heart>&#10084;</div>
</div>

like-bttn がクリックされたときに ajax リクエストを行う JavaScript コードがあります。

  $(".like-bttn").click(function(ev) {
    var id = $(ev.target).attr('data-answer-id');
    ... do something with id ...
  })

しかし、.heart をクリックすると、ev.target が .heart であり、「data-answer-id」がないため、コードが機能しません。

この状況での正しいアプローチは何ですか？

Answer 1

$(this)イベント ターゲットではなく、を使用します。

$(".like-bttn").click(function(ev) {
  var id = $(this).attr('data-answer-id');
   ... do something with id ...
 })

そして、ニールが指摘したように、使用する方がクリーンdataです:

  var id = $(this).data('answerId');