handling event bubling in jquery

Question

iam having links as shown below

<a item='1' href='javascript:void(0)'><img class='icon1' /><span>text1</span></a>
<a item='1' href='javascript:void(0)'><img class='icon2' /><span>text2</span></a>
<a item='1' href='javascript:void(0)'><img class='icon3' /><span>text3</span></a>
<a item='1' href='javascript:void(0)'><img class='icon4' /><span>text4</span></a>


$(function(){
$('a').click(_handleClick);
});

function _handleClick(e)
{
var _item=$(e.target).attr('item');
// do something with _item variable
}

// now my problem is when user clicks on image 'e' received in _handleClick is image so i can't read attr='item' so how can bubble the event to read that value.

Answer 1

Try this instead of doing the click target directly:

$(function(){
  $('a').click(function() {
    var _item = $(this).attr('item');
    // do something with _item variable        
  });
});

Though the click event is fired on all parent elements, the e.target is still the source of the click, the original deepest child you clicked on...jQuery with the $(this) handles that, no need to worry which child element below fired it.

Answer 2

You shouldn't need to do any handling of event bubbling at all since the 'a' element that has the event handler attached, also stores the 'item' attribute. In that case, you just use 'this' to refer to the item with the click event, and $(this).attr('item') will retrieve the value of 'item'.

This line:

var _item=$(e.target).attr('item');

should be:

var _item=$(this).attr('item');

EDIT: Clarified the first sentence, and added the following info:

To clarify, event bubbling is automatic in jQuery. If you click on an element's child, the event will bubble all the way up to the top, firing events as it goes.

There are times when you need to stop the firing with event.stopPropagation().

There are other times where it comes in handy. For example, consider a 'div' that has 100 children, all of which should receive the same click event. Instead of consuming all the resource that it requires to maintain event handlers for those 100 children, you could just assign 1 click event to the parent, then use event.target to determine which one was actually clicked.

Another nice thing about this approach, is that you don't have to use live() when dynamically adding additional children to that parent. Since they all fire the parent's click event because of bubbling, they are ready to go.

Answer 3

var _item=$(e.target).parents('a').attr('item');