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

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.


Avatar de Edu Lazaro

Edu Lázaro: Ingeniero técnico en informática, actualmente trabajo como desarrollador web y programador de videojuegos.

👋 Hola! Soy Edu, me encanta crear cosas y he redactado esta guía. Si te ha resultado útil, el mayor favor que me podrías hacer es el de compatirla en Twitter 😊

Si quieres conocer mis proyectos, sígueme en Twitter.

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

  1. Hola, te quisiera hacer una consulta me cree un blog para amazon afiliado y a una imagen le quiero poner el enlace de amazon para que al hacer click en la imagen o el botón de click lo dirija a la página del producto en específico pero no me funciona , no se direcciona a ninguna parte.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

“- Hey, Doc. No tenemos suficiente carretera para ir a 140/h km. - ¿Carretera? A donde vamos, no necesitaremos carreteras.”