Get element on which currently called jQuery event handler is attached

In this post I am going to explain, how we can get the element on which currently called jQuery event handler is attached using a simple Event Object called  event.delegateTarget . This event object has been added to the jQuery version 1.7, so the examples below will not work with the previous versions of jQuery.

As mentioned in the delegateTarget API Documentation:

This property is most often useful in delegated events attached by .delegate() or .on(), where the event handler is attached at an ancestor of the element being processed. It can be used, for example, to identify and remove event handlers at the delegation point. For non-delegated event handlers attached directly to an element, event.delegateTarget will always be equal to event.currentTarget.

Let’s say our HTML markup is like this:

<div id="container">
    <ul id="list1">
        <li><span>Item Number One</span></li>
        <li><span>Item Number Two</span></li>
        <li><span>Item Number Three</span></li>
    </ul>
    <ul id="list2">
        <li><span>Item Number One</span></li>
        <li><span>Item Number Two</span></li>
        <li><span>Item Number Three</span></li>
    </ul>
</div>

It’s a simple HTML markup with two unordered lists having span elements inside them. But this span’s are dynamically added to the DOM. Now, let’s say we have a requirement like, when the user clicks on span’s inside the first list, then the background color of this list will change to  light cyan and when the user clicks on span’s inside the second list, then the background color of this list will change to  light green .

Now, we can achieve this using jQuery like this:

$('#list1, #list2').on('click', 'span', function (event) {
    var $list = $(event.delegateTarget);
    var listId = $list.prop('id');
    if(listId === 'list1'){
        $list.toggleClass('lightCyan');
    }else if(listId === 'list2'){
        $list.toggleClass('lightGreen');
    }
});

Explanation:

  1. Code in the first line
    $('#list1, #list2').on('click', 'span', function (event) {
    

    Here, we are using the event delegation to bind the click event to all the dynamically created span elements. I have already explained about this in details in my last post named “Bind events to dynamically created elements using jQuery“. Please have a look, if you want to know more about it 😉

  2. Code in the second line
    var $list = $(event.delegateTarget);
    

    Here, we are using the delegateTarget property of the event object. It’s mainly refers to the target of the delegation or the element on which currently called jQuery event handler is attached. So, in case the user clicks one of the span elements inside the first list, then the code  $(event.delegateTarget) will give us the jQuery object of the first list  list1 and when the user clicks one of the span elements inside the second list, then it will give us the jQuery object of the second list  list2 .

  3. Code in the third line
    var listId = $list.prop('id');
    

    Here, we are getting the ID of the list which we have got from the above code using the .prop() method.

  4. Code in next few lines
    if (listId === 'list1') {
        $list.toggleClass('lightCyan');
    } else if (listId === 'list2') {
        $list.toggleClass('lightGreen');
    }
    

    It’s a simple if-else statement where we are checking the listId value. If it is list1 , that means that one of the span elements inside the first list have been clicked and hence we can toggle the class named lightCyan here, which is actually setting the background color as  light cyan . Else if the listId value is list2 , you must have guessed it by now ;), that means that one of the span elements inside the second list have been clicked and hence we can toggle the next class named lightGreen here, which is setting the background color as  light green , based on our requirement.

    I just want to let you know that, we can also do the same thing in few lines of code like

    $list.toggleClass((listId === 'list1') ? 'lightCyan' : 'lightGreen');
    

    But I have used the above code to keep it simple and easy to understand for all the developers.

Demo:

That’s it! 😉 If you have any comments or suggestion about this post, I would really appreciate it.
Happy Coding 🙂

Advertisements

3 thoughts on “Get element on which currently called jQuery event handler is attached

  1. Pingback: Get element on which currently called jQuery event handler is attached | selvinthangadurai

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s