桌子上的 JavaScript 问题答案

【问题标题】：JavaScript Issue on Table桌子上的 JavaScript 问题
【发布时间】：2013-06-06 09:11:02
【问题描述】：

我有一个来自数据库的结果表，然后我有以下 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 无济于事。

谁能指出我正确的方向？

【问题讨论】：

通过使用.attr('data-id')，您并没有利用数据属性的好处之一。使用.data('id')效率更高。
不确定您的意思？我不是在元素的 id（名称）之后，而是在使用 PHP 生成的记录的 id 之后。 #id 完全不同。
是的，#id 完全不同。听起来您需要阅读 data 属性！ .data('id') 与 id 属性无关。相反，它会搜索您使用属性“data-id”分配的数据值。同样，您应该使用.data('type') 而不是.attr('data-type')。每当您使用以“data-”开头的属性时，您就是在使用 html5 的一个特殊功能来存储这些值，并且最好使用.data() 方法访问它们。有关文档，请参阅 api.jquery.com/data/#data2。
啊好吧！没有意识到。谢谢你。我会仔细阅读的。

标签： javascript jquery html-table position z-index

【解决方案1】：

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

e.stopPropagation();

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

【讨论】：

太好了，效果很好。我不知道这个功能，非常有用。谢谢。
@Gaz.. 很高兴能帮上忙 :)

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：