jQuery UI widget factory _on event returns unexpected event target

Question

I have a little problem understanding the event handling of the jQuery Ui Widget factory.

See this snipped:

$(function () {

    $.widget("custom.superduper", {
        _create: function () {
            this._on($(this.element, "a"), {
                click: function (event) {
                    console.log($(event.target));
                }
            });
        }
    });

    $("#gallery").superduper();
});

Running on this HTML:

<ul id="gallery">
    <li><a href="#"><img src="http://www.placehold.it/50x50" /></a></li>
    <li><a href="#"><img src="http://www.placehold.it/50x50" /></a></li>
    <li><a href="#"><img src="http://www.placehold.it/50x50" /></a></li>
</ul>

Working demo: http://jsfiddle.net/ech2htrt/2/

When you click on an image in the gallery, the console output is:

Object[img 50x50]

I expected it to be the <a> element inside of the gallery. Of course I could use closest() or parent() to get the desired element, but that feels rather unnaturally. Where did I go wrong in the definition of the event handler?

Is there a better way to get the event triggering element? When i use this or $(this) the reference is always the widget element.

Abhishek Nafdey · Accepted Answer · 2014-09-23 14:25:12Z

1

As i understand, this._on($(this.element, "a"), {.... here you want to attach click event on anchor tag and the context should be this.element . If so the arguments are misplaced.The correct order is-

this._on($("a" , this.element), {

By doing this ,if i debug and see the event object ,i can see that the event.currentTarget is a and event.delegatetarget is also a. But as the img tag in above the anchor tag (z-index) the event.target comes out to be img.

If i increase the height and width on the anchor tag allowing me to click it arround the img tag , i get the desired results.

answered Sep 23, 2014 at 14:25

Abhishek Nafdey

1066 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nico O Over a year ago

brilliant. Thank you very much. Here is the demo with your fix: jsfiddle.net/ech2htrt/3

artm · Accepted Answer · 2014-09-23 14:14:46Z

1

You're getting img instead of a because even though your selector is a, img is what creates the event (event's source) and it bubbles up to the a, which you bind to. So event.target will be the img, not a. If you didn't have an img inside your a, the event.target would be the a. Also in your handler this refers to the widget because that's the final destination of the event before it reaches your handler. I don't think you have an option but to use closest().

See jquery cookbook, scroll up to 8.8

answered Sep 23, 2014 at 14:14

artm

8,5943 gold badges28 silver badges43 bronze badges

1 Comment

Nico O Over a year ago

Thank you very much for your reply. I will look into the event bubbeling and try to adapt to this concept. I will leave this question open for little while to see if other persons may have a different approach.

Collectives™ on Stack Overflow

jQuery UI widget factory _on event returns unexpected event target

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related