Wie erhalte ich in JQuery einen Verweis auf das Element, auf das innerhalb meiner definierten Klickfunktion geklickt wurde?

Question

Ich benutze diese JQuery die Situation für den Umgang mit dem jemand auf einem „li“ Element aus meiner Liste klickt ...

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

ich den Code in eine Funktion setzen wollen, also habe ich dieses

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

versucht

In meiner Funktion ist der Parameter "listItem" jedoch nicht das Listenelement, auf das geklickt wurde (es sieht aus wie das Fenster selbst oder so). Wie erhalte ich einen Verweis auf das Element, auf das in meiner Funktion geklickt wurde? Es wird im Folgenden detailliert beschrieben ...

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 

Answer 1

Duplizieren von get clicked element using jquery on event?.

Verwenden Sie in der Callback-Funktion $(this) oder verwenden Sie e.target anstelle von e.data.

Answer 2

$ (this) innerhalb der Callback-Funktion repräsentiert das aktuelle Zielelement. Wenn Sie es jedoch an die clickListItem() -Methode übergeben, greifen Sie außerhalb darauf zu, was wiederum den aktuellen Kontext (z. B. Fenster) darstellt. Deshalb ist es in der Callback-Methode übergeben oder in Ihrer Methode verwenden event.target

Answer 3

Verwenden Sie einfach this oder event.target wie gewohnt, wie in der Demo unter:

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>