Obtención del elemento raíz al que está vinculado un evento delegado - jQuery - jquery

Tomando el siguiente código:

    // Bind the click event to the thumbnails.
$("ul.hpList").on("click", "a.hpThumb", function (event) {

event.preventDefault();

var $this = $(this),

// Surely there has to be a smarter way to do this.
$hpList = $this.parents("ul.hpList");

changeItem($this, $hpList);

});

¿Cómo identifico mejor el elemento ancestro raíz al que está vinculado el evento? Me siento horrible buscando esto en el DOM.

Respuestas

Desde jQuery 1.7, el delegateTarget La propiedad se incluye en el objeto de evento que se le proporciona como primer parámetro, que (segun los docs), te dio:

El elemento donde estaba actualmente el controlador de eventos jQuery llamado adjunto.

Así que prueba lo siguiente;

$("ul.hpList").on("click", "a.hpThumb", function (event) {
event.preventDefault();

var $this = $(this),
var $hpList = $(event.delegateTarget);

changeItem($this, $hpList);
});

No está claro para mí lo que realmente estás tratando de encontrar, pero:

Utilizar event.target dentro de su controlador para determinar qué elemento DOM real activó el evento.

Utilizar $(this) para determinar a qué elemento DOM está asociado el controlador, que puede ser lo mismo o puede ser un padre del destino del evento.

Utilizar .closest () para encontrar el ancestro más cercano de un elemento que se ajuste a un selector dado.

prueba esto:

$("ul.hpList").on("click", "a.hpThumb", function (event) {
event.preventDefault();
var $this = $(this),
// Surely there has to be a smarter way to do this.
$hpList = $("ul.hpList").has($this);
changeItem($this, $hpList);
});