¿Obtener el elemento seleccionado usando jQuery en el evento?

84

Estoy usando el siguiente código para detectar cuándo se hace clic en un botón generado dinámicamente.

$(document).on("click",".appDetails", function () {
    alert("test");
});

Normalmente, si lo hiciera $('.appDetails').click(), podría usar $(this)para obtener el elemento en el que se hizo clic. ¿Cómo podría lograr esto con el código anterior?

Por ejemplo:

$(document).on("click",".appDetails", function () {
    var clickedBtnID = ??????
    alert('you clicked on button #' + clickedBtnID);
});

— Abogado del diablo
fuente

114

Tan simple como puede ser

Úselo $(this)aquí también

$(document).on("click",".appDetails", function () {
   var clickedBtnID = $(this).attr('id'); // or var clickedBtnID = this.id
   alert('you clicked on button #' + clickedBtnID);
});

— bipen
fuente

Parece que estoy lidiando con un problema de almacenamiento en caché del servidor. Lo siento.

— Abogado del diablo

53

Una advertencia para quienes usan ES6. Las funciones de flecha no establecen 'esto', por lo que será el padre. Entonces, básicamente no uses una función de flecha aquí.

— thomas-peter

4

@ thomas-peter digo que conviertes eso en una respuesta

— Jack

2

@ thomas-peter me ahorró más decenas de minutos de frustración, gracias.

— Milán Velebit

1

@ thomas-peter, ¡me acabas de salvar! Estaba tratando de averiguar por qué no funcionaba durante unos 30 minutos ... ¡Gracias!

— kriskotoo BG

53

Falta el parámetro de evento en su función.

$(document).on("click",".appDetails", function (event) {
    alert(event.target.id);
});

— Bastian Rang
fuente

6

Esto fue perfecto para mí. Da el elemento en el que se hizo clic: $ (this) solo dio el elemento que tenía el evento adjunto.

— Bill Tarbell

Este es el método perfecto. Gracias :)

— Swetabja Hazra

34

La forma convencional de manejar esto no funciona bien con ES6. Puedes hacer esto en su lugar:

$('.delete').on('click', event => {
  const clickedElement = $(event.target);

  this.delete(clickedElement.data('id'));
});

Tenga en cuenta que el objetivo del evento será el elemento en el que se hizo clic, que puede no ser el elemento que desea (podría ser un niño que recibió el evento). Para obtener el elemento real:

$('.delete').on('click', event => {
  const clickedElement = $(event.target);
  const targetElement = clickedElement.closest('.delete');

  this.delete(targetElement.data('id'));
});

— gofre
fuente

0

Una forma sencilla es pasar el atributo de datos a su etiqueta HTML.

Ejemplo:

<div data-id='tagid' class="clickElem"></div>

<script>
$(document).on("click",".appDetails", function () {
   var clickedBtnID = $(this).attr('data');
   alert('you clicked on button #' + clickedBtnID);
});
</script>

— iamnonso
fuente