Span inside Anchor with event bubbling

Question

Hi,

I have such a piece of html:

<li class="addToFriends"><a href="....">Something something<span>INSIDE SPAN</span>something</a></li>

To handle AJAX request when clicking on anchor I have registered handler on click event:

    $('.addToFriends a').click(function(event){
 var target = $(event.target);
 if (target.is('a')) {
              // if I click on SPAN element following fragment won't execute!


   // do ajax request
 }   
 event.preventDefault();
});

My questions are:

• why click event is raised for span element? After all, I didn't bind click event to SPAN elements
• apart from previous question, I thought that if I won't handle SPAN click event, browser will use event-bubbling to raise click event for anchor (if I won't call event.stopPropagation()). But I also didn't work out for me as that click event is raised only once

So now, I got round that problem I my solution is:

    $('.addToFriends a').click(function(event){
 var target = $(event.target);
 if (!target.is('a')) {
   target = target.parent('a')
 } 
            ...
});

But still, I'm curious why it works like this...

Thanks,

Paweł

Answer 1

You have to use the currentTarget of your event.

$('.addToFriends a').click(function(event){
     event.currentTarget;    
     ...
});

Answer 2

Ok, but if I click on SPAN and call stopPropagation() method my code in that form won't work:

$('.addToFriends a').click(function(event){
    var target = $(event.target);
    if (target.is('a')) {
       // do ajax request
       event.stopPropagation();               
       event.preventDefault();
    }

});

Still, I thing I'm missing some crucial points related with event bubbling.

Answer 3

You can always read the specification. A nice tutorial is also available here.

StopPropagation has only meaning if you have defined click event handlers for both the SPAN and A elements. Calling the stopPropagation in the SPAN event handler will prevent the A handler from being called. This assumes the default bubble phase.

Answer 4

Thanks,

I will take a closer look into specification & article. Anyway, meaby you could answer that question:

why click event is raised for span element? After all, I didn't bind click event to SPAN elements

because, mainly this is an issue for me.

Answer 5

Thanks a lot for help. After studing mentioned articles everything is crystal clear.

And instead of refering to e.target (which can change) I refer to this (which is always anchor).

Answer 6

I have another problem similar to this one. I have a List Items menu with A inside of it & Spans dynamically written into the A elements while hovering, for a JQ fadein affect.

Same problem as dragonfly described - Span is bubbling up on click event, and at FF to initiate the click event you need to double click the A element. On any other browser only 1 click is required.

Did anyone solved that kind of matter?