嵌套的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及更低版本：

問題是由於.live() ，兩個事件處理程序都綁定到DOM樹的根目錄：

傳遞給.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));
});

Answer 2

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

應該工作得很好。