HTML属性を一部分だけ無効にしたい

Question

前提・実現したいこと

Railsアプリを制作中です。
index.htmlに表示されている行をクリックするとモーダルウィンドウでshow.htmlを表示するようにしています。
しかし、行の中にあるボタンをクリックすると画面遷移とモーダル表示が重複してしまい、フリーズしてしまうので、
%tdの一部分のみ、クリックしてもモーダル表示しないようにしたいです。

該当のソースコード

#index.html.haml
- @clients.each do |client|
  %tr{ data: { target: "#client-modal#{client.id}" , toggle: :modal } }
    %td= client.company_name
    %td= client.base_name
    %td= client.phone
    %td= client.fax
    %td.text-right
      = show_btn(client)
      = edit_btn(client)
      = destroy_btn(client)

試したこと

一行ずつモーダル表示させるコードを書く

%td{ data: { target: "#client-modal#{client.id}" , toggle: :modal } }= client.company_name
%td{ data: { target: "#client-modal#{client.id}" , toggle: :modal } }= client.base_name
%td{ data: { target: "#client-modal#{client.id}" , toggle: :modal } }= client.phone
%td{ data: { target: "#client-modal#{client.id}" , toggle: :modal } }= client.fax

しかし、同じコードを何度も書くのは、可読性が下がる。

試したこと2

colgroupでまとめてdata属性を与える

%colgroup{ span: '4', data: { target: "#client-modal#{client.id}" , toggle: :modal }}
- @clients.each do |client|
  %tr{ data: { target: "#client-modal#{client.id}" , toggle: :modal } }
    %td= client.company_name
    %td= client.base_name
    %td= client.phone
    %td= client.fax
    %td.text-right
      = show_btn(client)
      = edit_btn(client)
      = destroy_btn(client)

モーダル表示しなくなってしまった。

試したこと3

javascriptで属性を削除したい

#index.html.haml
:javascript
  $(function() {
  $('tr').removeAttr('data');
  });

ボタン部分のみdata属性を削除するにはどのように書けばいいかわかりませんでした????

###どの方法ならうまくいくのか？
javascriptを触らなきゃいけなさそうだけど…

Comments

[storm3]

イベントの伝播については確認しましたでしょうか？
tdタグにあるボタンを押したクリックイベントの後に、trタグにクリックイベントが伝播しているようにみえます。
参考:
https://itsakura.com/javascript-bubbling

[kazup1125]

ご回答ありがとうございます。
そうですね。tdタグにあるボタンをクリックするとモーダルウィンドウが開き、ボタンに設定された画面に遷移する感じです。

[storm3]

原因もしイベントの伝播（バブリング）だった場合は、tdにつけたボタンのclickイベントの中でイベントのバブリングをキャンセルすれば解決すると思います。
その場合は自己解決にしてください。

イベントのバブリングのキャンセルでも解決しない場合は、質問文にイベントのバブリングのキャンセルもダメだったということを追記すれば、別の観点から回答が得られると思います。