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

Question

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

• 表#主
• • TBODY
• • • tr.Row
• • • • TD
• • • • • input.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();

我尝试了两种功能,不同的组合,但无法弄明白.有人能告诉我我做错了什么吗？

谢谢!<3

Answer 1

更新: @patrick在他的评论中演示,event.stopPropagation()应该从jQuery 1.4.3开始.

对于jQuery 1.4.2及更低版本:

问题是两个事件处理程序都绑定到DOM树的根,原因是.live():

传递给的处理程序.live()永远不会绑定到元素; 相反,.live()将特殊处理程序绑定到DOM树的根.

所以event.stopPropagation不再有效(两个事件处理程序都是同一级别):

由于该.live()方法在事件传播到文档顶部后处理事件,因此无法停止实时事件的传播.

event.stopImmediatePropagation改为使用并反转绑定事件处理程序的顺序(否则它将无法按照它们绑定的顺序调用事件处理程序):

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

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