桌面上的JavaScript问题

我有一个数据库的结果表，然后我有下面的JavaScript，允许用户单击表行，然后将它们带到正确的记录

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;
    }
});

这非常有效，除了在每个表行中，我都有一个带有按钮的表单来删除记录，单击该按钮会弹出一个窗口。不幸的是，由于现在可以单击表行以将用户带到正确的记录，因此如果用户单击“删除”按钮，它会尝试显示弹出窗口，但随后会快速重定向到“记录显示”视图

我想这可能是固定的CSS，但我已经尝试了立场：相对；和z-索引都没有用

---

有人能给我指出正确的方向吗？

取消按钮的单击事件，以免将其传播到表行。

在表单按钮的

单击事件中编写这段代码

e.stopPropagation();

它将阻止事件向父级冒泡。
您必须单击按钮停止传播：

element.click(function (e) {  // 'element' would be your button/a/input
    e.stopPropagation();

我创建了一个小提琴来演示它是如何工作的：.
通过使用
.attr（'data-id'）
您没有利用数据属性的一个好处。使用
.data（'id'）
更有效。不知道你的意思吗？I'；我不是在元素的id（名称）之后，而是在使用PHP生成的记录的id之后。#id完全不同。是的，
#id
完全不同。听起来您需要仔细阅读数据属性
.data（'id'）
与id属性无关。相反，它会搜索您使用“数据id”属性指定的数据值。同样，您应该使用
.data（'type'）
，而不是
.attr（'data-type'）
。无论何时使用以“data-”开头的属性，您都在使用html5存储这些值的特殊功能，最好使用
.data（）
方法访问这些值。参见api.jquery.com/data/#data2获取文档。啊，好的！我没有意识到。非常感谢。我会仔细阅读的。好极了，这很有效。我不知道这个功能，非常有用。谢谢。@Gaz。。很高兴能帮忙：）