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

Question

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

• table#Main
• • 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 及以下版本:

问题在于，由于 .live()，两个事件处理程序都绑定(bind)到 DOM 树的根。 :

The handler passed to .live() is never bound to an element; instead, .live() binds a special handler to the root of the DOM tree.

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

Since the .live() method handles events once they have propagated to the top of the document, it is not possible to stop propagation of live events.

使用event.stopImmediatePropagation相反，并颠倒绑定(bind)事件处理程序的顺序(否则它不会工作，因为事件处理程序按照它们绑定(bind)的顺序被调用):

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

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