Bug Tracker

#944 closed enhancement (fixed)

Opened February 12, 2007 02:55PM UTC

Closed January 18, 2009 03:15AM UTC

$().trigger + event propogation

Reported by: anonymous Owned by:
Priority: minor Milestone:
Component: event Version:
Keywords: event trigger propogation Cc:
Blocked by: Blocking:
Description

Test case:

<div><span><a href="#">test link</a></span></div>

<script type="text/javascript">
$('div, a')
    .bind('click', function(e){
        alert('current: '+ this.nodeName +', target: '+ e.target.nodeName);
    });

$('a').trigger('click');
</script>

Result:

current: A, target: A

Expected result:

current: A, target: A
current: DIV, target: A
Attachments (0)
Change History (5)

Changed April 27, 2007 03:02AM UTC by brandon comment:1

need: → Review

Perhaps this could be done by creating a "propagate" method that if the event wasn't stopped the method would search the parents for handlers of the same type. It could be done but perhaps best done via a plugin and might turn out to be too slow.

Changed March 17, 2008 11:32PM UTC by flesler comment:2

Ok, the demo says: $('div, a') not $('div a'). Note the comma. I assume that's a typo ?

This is solved with event delegation, instead of

$('div a')

use $('div').click(function(e){

if( e.target.nodeName == 'A' )

......................;

});

Changed March 29, 2008 10:20AM UTC by joern comment:3

description: Test case:\ {{{\ <div><span><a href="#">test link</a></span></div>\ \ <script type="text/javascript">\ $('div, a')\ .bind('click', function(e){\ alert('current: '+ this.nodeName +', target: '+ e.target.nodeName);\ });\ \ $('a').trigger('click');\ </script>\ }}}\ \ Result:\ {{{\ current: A, target: A\ }}}\ \ Expected result:\ {{{\ current: A, target: A\ current: DIV, target: A\ }}} → Test case: \ {{{ \ <div><span><a href="#">test link</a></span></div> \ \ <script type="text/javascript"> \ $('div, a') \ .bind('click', function(e){ \ alert('current: '+ this.nodeName +', target: '+ e.target.nodeName); \ }); \ \ $('a').trigger('click'); \ </script> \ }}} \ \ Result: \ {{{ \ current: A, target: A \ }}} \ \ Expected result: \ {{{ \ current: A, target: A \ current: DIV, target: A \ }}}

Ariel, it doesn't look like its a typo. To make it more clear:

<div><span><a href="#">test link</a></span></div>
<script type="text/javascript">
$('div').bind('click', function(e){
        alert('current: '+ this.nodeName +', target: '+ e.target.nodeName);
    });
$('a').trigger('click');
</script>

So this is about event bubbling for custom events, which isn't implemented. I agree with Brandon that a plugin implementation would be helpful for a start.

Changed March 29, 2008 02:49PM UTC by flesler comment:4

Hi Jorn, there is a plugin, it's called Bubble: http://plugins.jquery.com/project/Bubble

Changed January 18, 2009 03:15AM UTC by dmethvin comment:5

resolution: → fixed
status: new → closed

Works as desired in jQuery 1.3!