Jquery Onclick y referencia al objeto cliqueado

Question

Tengo la siguiente expresión jQuery, dentro de la función necesito una referencia al objeto en el que se hizo clic, ¿hay alguna manera de hacer esto?

$('#tagList li').click(function() {
  /* contents */
});

Answer 1

Usar

$(this)

Answer 2

puede usar el valor de retorno

$("#tagList li").bind("click", function(e) {
    alert(e.currentTarget + ' was clicked!');
});

o si lo desea, puede simplemente señalar el objeto en modo jQuery

$("#tagList li").bind("click", function(e) {
    alert($(this) + ' was clicked!');
});

si es nuevo en jQuery, le sugiero encarecidamente que vea algunos screencasts de Remy Sharp en jQuery for Designers , son Es genial entender un poco cómo funciona jQuery y, mejor aún, cómo usar console.log () para ver los objetos que puedes usar.

Answer 3

Sí, la palabra clave this hace referencia al elemento DOM en el que se hizo clic. Puede " envolver " así:

$(this)

Esto le permitirá tratarlo como un objeto jQuery.

Answer 4

La palabra clave this es lo que está buscando. A menudo querrá aplicar la función jQuery a esto para hacer su trabajo. Ejemplo:

$('#tagList li').click(function() {
  $(this).css({ color: 'red' });
});

Answer 5

Agregar una nueva respuesta que cubrirá más casos de uso, específicamente cuando desee utilizar las funciones de flecha.

También se recomienda que no agregue un clic JS a un elemento li. En su lugar, debe usar un botón o ancla (algo que se puede hacer clic) anidado dentro de este elemento.

Dado que el elemento en el que hace clic podría ser un elemento secundario, debe asegurarse de orientar el elemento correcto.

En mi ejemplo, asignaré el clic a un botón dentro del li, así como una clase en él. El marcado simplemente será:

<ul id="taglist">
  <li><button class="tag-button">Tag 1</button></li>
  <!-- ... -->
</ul>

Entonces el javascript:

$('#tagList li button.tag-button').click((e) => {
  const thisButton = $(e.target).hasClass('tag-button')
    ? $(e.target) : $(e.target).closest('.tag-button');
  // do something with thisButton
});

Esto asegura que está apuntando al elemento en el que se registró el clic. Si tiene un marcado anidado dentro de su botón (como o), entonces es posible que el destino del evento sea el elemento anidado en lugar del elemento al que desea asignar el clic.