In JQuery, how do I get a reference to the element that was clicked from within my defined click function?

Question

I use this JQuery for handling the situation where someone clicks on a “li” element from my list …

$listItems.click(function(e) {
    e.stopPropagation();
    console.log( $(this) ); 
    var selectedText = $(this).text();
    selectItemFromStyledList($styledSelect, $this, selectedText, $list)
});

I want to put the code into a function, so I’ve tried this

$listItems.click({styledSelect: $styledSelect, selectMenu: $this, listItem: $(this), list: $list}, clickListItem);

However, in my function, the “listItem” parameter is not the list item that was clicked (it looks like the window itself or something). How do I get a reference to the element that was clicked from within my function? It is detailed below …

function clickListItem(event)
{
        var $styledSelect = $(event.data.styledSelect);
        var $selectMenu = $(event.data.selectMenu);
        var $listItem = $(event.data.listItem);     // This is not the item that was clicked
        var $list = $(event.data.list); 

        event.stopPropagation();
        var selectedText = $listItem.text();
        selectItemFromStyledList($styledSelect, $selectMenu, selectedText, $list)
}       // clickListItem

Don't forget to upvote an answer if this was helpful. – Cass Jul 22 '16 at 22:26 — Cass, Jul 22 '16 at 22:26

score 1 · Accepted Answer · answered Jul 22 '16 at 22:10

1

Duplicate of get clicked element using jquery on event?.

Use $(this) in the callback function, or use e.target instead of e.data.

answered Jul 22 '16 at 22:10

Cass

870
8
21

score 0 · Answer 2 · answered Jul 22 '16 at 22:23

$(this) inside the callback function represents the current target element. But when you are passing it to the clickListItem() method you are accessing it outside, which in turn, will represent the current context (e.g window). Therefore pass it in the callback method or use event.target in your method

score 0 · Answer 3 · answered Jul 23 '16 at 01:03

Just use this or event.target as you normally would, as in the demo below:

function clickListItem(event) {
  console.log( this );
  console.log( event.target );
  console.log( event.data );
}

$(function() {
  $listItems = $('#trinity > li');
  $listItems.click({some:'data',over:'here'}, clickListItem);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="trinity">
  <li>Father</li>
  <li>Son</li>
  <li>Holy Spirit</li>
</ul>

In JQuery, how do I get a reference to the element that was clicked from within my defined click function?

3 Answers3