嵌套的jquery选择器触发父和子特定事件 [英] Nested jquery selectors triggering both parent and child specific events

问题描述

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

I've got a table with the following structure

• table＃Main


• 
  
  • tbody
  
  

• 
  
  • tr.Row
  
  
  
  
  • 
    
    • 
      
      • td
      
      
      
      
      • 
        
        • 
          
          • 
            
            • input.EditRow
            
            

            我的jquery看起来像这样：

            My jquery looks like this:

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

            我的问题是，如果单击.EditRow按钮并调用EditRow函数，则RowClick函数为之后立即调用。

            My problem is that if I click the .EditRow button and call the EditRow function, the RowClick function is called immediately after.

            在对网站进行一些研究之后，我看到其他人通过使用以下任何一个命令解决了这个问题。

            After doing some research on the site, I saw that others got around this problem by using either one of the other of the following commands.

            e.preventDefault();
            e.stopPropagation();
            

            我尝试了两种功能，不同的组合，但无法弄明白。谁能告诉我我做错了什么？

            I tried them on both functions, in different combinations but couldn't figure it out. Can someone tell me what I'm doing wrong?

            谢谢！ < 3

            Thank you! <3

            推荐答案

            更新：正如@patrick在评论中所说， event.stopPropagation（）应该可以在 jQuery 1.4.3 上使用。

            Update: As @patrick demonstrates in his comment, event.stopPropagation() should work from jQuery 1.4.3 on.

            对于jQuery 1.4.2及更低版本：

            问题是两个事件处理程序都绑定到DOM的根目录树，由于 .live（） ：

            The problem is that both event handlers are bound to the root of the DOM tree, due to .live():

            
            

            传递给 .live（）的处理程序从不绑定到元素;相反， .live（）将特殊处理程序绑定到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 已经不再有效（两个事件处理程序都是同一级别）：

            So event.stopPropagation has not effect anymore (both event handlers are that the same level):

            
            

            因为 .live（） 方法处理事件一旦传播到文档顶部，就无法停止传播直播事件。

            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 改为并反转绑定事件处理程序的顺序（否则它将无法按照它们绑定的顺序调用事件处理程序）：

            Use event.stopImmediatePropagation instead and reverse the the order of binding the event handlers (otherwise it won't work as event handlers are called in the order they bound):

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

            这篇关于嵌套的jquery选择器触发父和子特定事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！