嵌套的jquery选择器触发父和子特定事件
我有一个具有以下结构的表格
- 表＃主
- 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();
我尝试了两种function，不同的组合，但无法弄明白。 有人能告诉我我做错了什么吗？
谢谢！ <3
更新：正如@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)); });
$(".EditRow").live("click", function (e) { e.stopPropagation(); EditRow($(this)); });
应该工作得很好。