0

Where does this reference to in a delegated .on event? Example:

$('#foo').on('click', $('.bar'), function() {
    console.log(this);
});

In the example this will reference to #foo. But how do i access the bar element that got clicked? I might have 5 bar elements and I want to know which one was clicked.

Thanks

Edit: Sorry i changed #bar to .bar (since it exists multiple times).

The answer that i should just use '.bar' helped. But what if i have selector like this:

$('.bar').find('a');

How would i incorporate something like this?

This won't work: (cause this will reference to #foo)

$('#foo').on('click', $('.bar').find('a'), function() {
    console.log(this);
});
user1081577
  • 469
  • 2
  • 8
  • 25
  • `$(this)` should be what you're looking for – cecilozaur Jan 29 '14 at 13:51
  • 1
    You also should not have five elements that match `#bar`, since ids must be unique within an HTML document. – Frédéric Hamidi Jan 29 '14 at 13:52
  • 1
    This particular example is pointless, and in practice you would do much better to put a handler directly on `#bar` instead. – Jon Jan 29 '14 at 13:52
  • @Jon Depends. If `#bar` doesn't always exist, and has the potential to be destroyed and then recreated as a new element with that ID during the lifetime of the document, event delegation's probably the better solution. – Anthony Grist Jan 29 '14 at 13:57
  • @AnthonyGrist: Sure, that is *possible* (although I think we can agree it's not very likely). That's why I included "in practice", and of course "put a handler on #bar" does not imply "in the exact same spot where this code used to be". – Jon Jan 29 '14 at 13:59
  • @Jon What you say makes sense, but the OP specifically asks about delegation, so any answer without it would not be relevant. It depends on what you work on, obviously, but I use code similar to this very often. – Reinstate Monica Cellio Jan 29 '14 at 14:06
  • @Archer: If by "similar to this" you mean simply "delegation" then I use such code very often as well. In any case, IMO the OP does not clearly understand how delegation works and may be using delegation without really knowing why; this is why I am suggesting something not directly considered. – Jon Jan 29 '14 at 14:15
  • @Jon I think we're at crossed purposes here. I'll leave it to the OP to clarify if needed. – Reinstate Monica Cellio Jan 29 '14 at 14:16
  • @Archer: Of course. I 'm not trying to convince anyone, and obviously have no vested interest in the outcome. – Jon Jan 29 '14 at 14:17

3 Answers3

3

Change it to this...

$('#foo').on('click', '.bar', function() {
    console.log(this);
});

Now this will be the clicked .bar.

If you want a jQuery object then use $(this) as normal.

Edit

As per the change to question code, you'll need this...

$('#foo').on('click', '.bar a'), function() {
    console.log(this);
});

That simply extends the click event handler to links inside .bar elements that may not exist at document.ready.

Reinstate Monica Cellio
  • 25,975
  • 6
  • 51
  • 67
2

Two ways.

  1. Use a string selector, not a jQuery object, when calling .on():

    $('#foo').on('click', '#bar', function() {
    console.log(this); // #bar
});

  2. Specify a parameter name for the jQuery normalised event object, and use its target property:

    $('#foo').on('click', $('#bar'), function(e) {
    console.log(this); // #foo
    console.log(e.target); // #bar
});

EDIT: Ignore the second option. jQuery doesn't accept a jQuery object for the selector, and as a result simply ignores it. You will not be setting up event delegation, you'd instead just be setting a static click event handler on #foo, which works due to event propagation.

Anthony Grist
  • 38,173
  • 8
  • 62
  • 76
0

An ID should be used once in a page. So you can add a class fooClass to your 5 elements and do :

$('.fooClass').onclick(function() {
  alert("my bar element: " + $(this));
});

and do what you want with $(this).

Anthed
  • 139
  • 1
  • 6