Question

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/

Answer 1

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/