JavaScript Issue on Table

Question

I have a table of results from a database and then I have the following JavaScript that allows a user to click a table row, which will then take them to the correct record.

var pathName = window.location.pathname;

$('table tr').click(function(event) {
    var modelId = $('section').attr('data-id');
    var dataType = $(this).attr('data-type');
    var id = $(this).attr('data-id');

    if(pathName === '/accounts/' + modelId) {
        if(dataType === 'contact') {
            pathName = '/contacts';
        } else if(dataType === 'note') {
            pathName = '/notes';
        } else if(dataType === 'opportunity') {
            pathName = '/opportunities';
        }
    } else if(pathName === '/contacts/' + modelId) {
        if(dataType === 'note') {
            pathName = '/notes';
        } else if(dataType === 'opportunity') {
            pathName = '/opportunities';
        }
    } else if(pathName === '/events/' + modelId) {
        pathName = '/delegates';
    }

    var showUrl = pathName + '/' + id;

    if(id === undefined) {
        event.preventDefault();
    } else {
        window.location = showUrl;
    }
});

THat works great, except that in each table row, I have a form with a button to delete the record, which when clicked bring up a popup. Unfortunately, because now the table rows are clickable to take the user to the correct records, if they click the delete button it attempts to show the popup but then quickly redirects to the record show view.

I'm thinking this could possibly be fixed with CSS but I've tried position: relative; and z-indexing to no avail.

Can anyone point me in the right direction?

Answer 1

In the click event for the form button write this piece of code.

e.stopPropagation();

It will stop the event from bubbling to the parent.