2

我有一个来自数据库的结果表，然后我有以下 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 解决，但我已经尝试过 position: relative; 和 z-indexing 无济于事。

谁能指出我正确的方向？

4

3 回答 3

1

在click event for the form button写这段代码。

e.stopPropagation();

它将阻止事件冒泡到父级。

于 2013-06-06T09:17:07.160 回答
0

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

于 2013-06-06T09:12:49.217 回答
0

您必须在单击按钮时停止传播：

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

我创建了一个小小提琴来演示它是如何工作的：http: //jsfiddle.net/PVvfV/。

于 2013-06-06T09:20:50.980 回答