¿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);
});
jquery event-handling click jquery-events Abogado del diablo
fuente

Respuestas:

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