Question

When i use the following to register a handler for click events:

$('.drilldown-action > li').live('click', function(event){
    drilldown.loadActions($(event.target));
});

With HTML:

<ul class="drilldown-action">
    <li data-action="Dummy"><a href="#">Dummy</a> Dum</li>
</ul>

In the browser ( using Chrome ) I click on the a tag, how can i get the jQuery object that the event was registered on? I expect the li element to be the event target, as that is what i put in the selector. I know i can just use .parent() for this case, but is there a way to get the object that matched the selector, instead of the bottom event target? Also using .parent() is a pain because when the other part of the li is clicked, i wouldn’t have to need to use it.

Answer 1

e.target is the link tag.

You should use this to get li tag that is the element bound to the handler.

Code:

$('.drilldown-action > li').live('click', function(event){
    drilldown.loadActions($(this));
});

Note: As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live().