jqueryjquery-eventsevent-bubbling

event.target jquery on() mousedown/up is not giving the dom specified by selector

I have this simple html: 

<div class="wrapper">
    <span class="higher">
        [higher]
        <span class="lower">
            hello
        </span>
    </span>
</div>​

and this js:

$('.wrapper').on('mousedown', '.higher', function(e){
    alert($(e.target).attr('class'))
    })​

Basically, when I click on the "hello" word, I am getting the "lower" instead of "higher". How can I make it so that the event's target is the same as specified in the selector parameter of the on()?

Here's a little fiddle for this http://jsfiddle.net/TUvB7/2/

Solution

  • Use this instead, e is the element that started the bubbling

    $('.wrapper').on('mousedown', '.higher', function(e){
    alert($(this).attr('class')) // Changed line
})​

    http://jsfiddle.net/TUvB7/7/