JQuery: $(‘tr[data-link]’).click で行クリックできるようにした場合に、その行内の別リンクを有効にする方法


テーブルで tr にリンク先のURLをdataで入れておいて、行のどこでもクリックしたら、そのリンクへジャンプするというのはよくやる。例えば以下

<tr data-link="http://mysite.com/jobs">
  <td>Steve Jobs</td>
  <td>Apple Inc.</td>
  <td>U.S.A</td>
  <td><a href="http://wiki.org/jobs">Wiki</a></td>
</tr>
$('tr[data-link]').click(function() {
   window.location = this.dataset.link;
});

しかしこのままだと、先にtr行が反応してしまいtr行内にある別のリンクがクリックできない。上の例だと行内のWikiへのリンクがクリックできないことになる。

以下のようにしました。

...略...
  <td><a href="http://wiki.org/jobs" class="btn">Wiki</a></td>
...略...
$('tr[data-link]').click(function(e) {
  if (!$(e.target).closest('a').is('.btn')) {
    window.location = this.dataset.link;
  }
});

class は is(‘.クラス名’) で判定できるのでリンクの方に適当なクラス名を付けて処理から除外する。

もっと簡単な方法があるのだろうか?

広告