How to get the correct "this" element when using jQuery on() with two selectors

Question

Consider the following code:

$('#main').on('click', 'a', function() {
    console.log($(this));
});

$(this) will always correspond to the #main element and not to the <a> clicked. How can I get the <a> that was clicked?

Thanks!

Edit:

Sorry it seems like you guys are correct: http://jsfiddle.net/R2rJU/1/

My problem was that I saved the second selector's results to a variable, making it unusable as a selector.

Answer 1

No, you seem to be mistaking something. this will always refer to the DOM element being clicked inside the click event handler.

Answer 2

this refers to the click handler of <a> tag. so you are doing correct

if you want to use explicitly then you can use event.target Event.Target

 $("#main").html("clicked: " + event.target.nodeName);

Answer 3

$('#main').on('click', 'a', function() {
    console.log($('#main :selected').text());
});