Question

Taking the following code:

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

    });

How do I better identify the root ancestor element that the event is bound to. I feel awful searching the DOM for this.

Answer 1

Since jQuery 1.7, the delegateTarget property is included in the event object given to you as the first parameter, which (according to the docs), gives you:

The element where the currently-called jQuery event handler was attached.

So give the following a go;

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

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

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