Отримання кореневого елемента, пов'язаного з делегованою подією, пов'язано з - jQuery - jquery

Взявши наступний код:

    // 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);

});

Як мені краще визначити елемент кореневого предка, до якого пов'язана подія. Я відчуваю жахливий пошук DOM для цього.

Відповіді:

З jQuery 1.7, delegateTarget властивість включено в об'єкт події, надану вам як перший параметр,відповідно до документів), надає вам:

Елемент, в якому був прийнятий обробник подій jQuery прикріплений.

Отже, дайте наступний крок;

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

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

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

Мені не ясно, що ви насправді намагаєтеся знайти, але:

Використовуйте event.target у вашому обробнику, щоб визначити, який фактичний елемент DOM викликав подію.

Використовуйте $(this) щоб визначити, до якого елементу DOM приєднаний обробник, який може бути одним і тим самим, або може бути батьком цільової події.

Використовуйте .closest () щоб знайти найближчого предка елемента, який відповідає даному селектору.

спробуйте це:

$("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);
});