嵌套 jquery 选择器触发父级和子级特定事件

我有一个具有以下结构的表

• 表#主
• • tbody
• • • tr.Row
• • • • td
• • • • • 输入.EditRow

我的 jquery 看起来像这样：

        $("table#Main > tbody > tr.Row").live("click", function (e) {
            RowClick($(this));
        });

        $(".EditRow").live("click", function (e) {
            EditRow($(this));
        });

我的问题是，如果我单击 .EditRow 按钮并调用 EditRow 函数，则会立即调用 RowClick 函数。

在对该网站进行一些研究后，我发现其他人通过使用以下命令之一解决了这个问题。

e.preventDefault();
e.stopPropagation();

我以不同的组合尝试了这两个功能，但无法弄清楚。有人可以告诉我我做错了什么吗？

谢谢你！

Update:正如@patrick 在他的评论中所展示的那样，event.stopPropagation()应该从jQuery 1.4.3 on.

对于 jQuery 1.4.2 及以下版本：

问题是两个事件处理程序都绑定到 DOM 树的根，因为.live() http://api.jquery.com/live/:

处理程序传递给.live()永远不会绑定到元素；反而，.live()将一个特殊的处理程序绑定到 DOM 树的根。

So event.stopPropagation http://api.jquery.com/event.stopPropagation/不再有效（两个事件处理程序都是同一级别）：

自从.live()方法处理事件，一旦它们传播到文档顶部，就不可能停止实时事件的传播。

Use event.stopImmediatePropagation http://api.jquery.com/event.stopImmediatePropagation/相反，并反转绑定事件处理程序的顺序（否则它将无法工作，因为事件处理程序按照它们绑定的顺序调用）：

$(".EditRow").live("click", function (e) {
    e.stopImmediatePropagation();
    EditRow($(this));
});

$("table#Main > tbody > tr.Row").live("click", function (e) {
    RowClick($(this));
});