link_to delete inside clickable tr

Question

I want to create table that contains column with delete buttons. Moreover I want redirect user to details page after click at the row.

Problem is because delete button is within clickable row.

Currently after click on delete button user is redirected to details page.

html.haml

%tbody
- wallets.each do |wallet|
    %tr.clickable-row{"data-href" => wallet_path(wallet)}
        %td= wallet.name
        %td= link_to 'Destroy', wallet, method: :delete, class: "btn btn-danger inside-link", data: { confirm: 'Are you sure?' }

js.coffee

$ ->
    $('.clickable-row').click ->
        window.document.location = $(this).data('href')
    $('.inside-link').click (event) ->
        event.stopImmediatePropagation()

Answer 1

You don't need to make any js changes for this. You can achive it by setting z-index property for button and tr tag.Try to set

z-index:1;

On tr tag. And

z-index:2;

On your delete button. And all done

Answer 2

IT's because event handler from rails' javascript is triggering the event bubbling due to data-confirm.

Rails add click event handler to data-confirm elements which will trigger a confirm dialog box. So I believe in this case, that event handler is triggering event bubbling.

Please try removing data-confirm.