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

时间:2011-01-13 19:56:30

标签: javascript 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();

我尝试了两种功能,不同的组合,但无法弄清楚。有人能告诉我我做错了吗?

谢谢! < 3

2 个答案:

答案 0 :(得分:5)

更新:正如@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));
});

答案 1 :(得分:1)

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

应该可以正常工作。