Obtener el ID del elemento que ha iniciado un evento en jQuery

En ocasiones, en las funciones de jQuery nos gustaría obtener el ID del elemento que ha iniciado un evento, que es lo que veremos en este tutorial. Si nunca has utilizado jQuery, es recomendable que consultes primero el tutorial de introducción a jQuery.

Un buen ejemplo podría ser cuando hacemos clic en un botón y la acción inicia una función de JavaScript, dentro de la cual queremos obtener el ID del botón en el que hemos hecho clic.

En jQuery podemos utilizar event.target, que siempre se refiere al elemento que ha provocado el inicio del evento. En este caso, ‘event’ vendría siendo el parámetro que le pasamos a la función.

Vamos a ver un ejemplo:

$(document).ready(function() {
  $("#elemento").click(function(event) {
    alert(event.target.id);
  });
});

Según el ejemplo, cuando hagamos clic en el elemento cuyo ID es ‘elemento’, se abrirá una ventana de diálogo con su ID. Aquí tenéis un enlace al fiddle con el ejemplo.

También es posible usar this, pero en este caso no estaríamos de un objeto de jQuery, por lo que lo que quieres es utilizar una función de jQuery, deberás utilizar $(this). Por ejemplo:

$(document).ready(function() {
  $("#elemento").click(function(event) {
    $(this).append("Has hecho clic!");
  });
});

Funcionará con todas las versiones actuales de Firefox, Chrome, Explorer y Opera.

---