Passing Event data to callback function with jQuery

Question

I'm having difficulty understanding how to use event.data to return the value of whatever element the event fired one. Here my example:

<a href="#" class="dw_add">
  <img src="http://something" />
</a>

var callback = function(event){ console.log(event.data.src) }

$('.dw_add')
  .on('click', { src: $(this).find('img').attr('src') },callback);

$this is currently referencing the document and not the that was clicked. Hopefully you can see what I'm trying to do, but my javascript knowledge is limited, think I'm approaching it in a PHP mindset.

Any ideas how to pass the value of 'img src' to the callback?

adeneo · Accepted Answer · 2012-02-27 00:36:11Z

You are not inside a functions scope, so this:

$('.dw_add').on('click', { src: $(this).find('img').attr('src') },callback);

will not work as $(this) is not the element you think it is because there is no local scope for the clicked element, no event.target or event.data etc!

However this will work as it has a direct reference to the element and scope for "this" is not an issue:

var callback = function(event){ console.log(event.data.src) }
var elm = $('.dw_add');
elm.on('click', { src: elm.find('img').attr('src') },callback);

and this will work as $(this) is inside a function scope:

function callback(a){ console.log(a) }

$('.dw_add').on('click', function() {
  var a = $(this).find('img').attr('src');
  callback(a);
});

Also, using $(this) inside the callback function will work, as it is, again, inside a functions scope and has a reference to the targeted element.

Matt Bradley · Accepted Answer · 2012-02-26 23:53:56Z

1

Why not do something like this:

var callback = function(event){ console.log($(this).find('img').attr('src')) }

$('.dw_add')
    .on('click', callback);

answered Feb 26, 2012 at 23:53

Matt Bradley

4,5031 gold badge22 silver badges13 bronze badges

Comments

josh3736 · Accepted Answer · 2012-02-27 00:03:36Z

0

In jQuery event handlers, this is set to the DOM element that fired the event. Since you're attaching an event handler to the <a> element, this will be the link.

If you want to get the src of the img, you'll have to find the img element in the triggering a by using find() or children():

$('.dw_add').on('click', function(e) {
    $(this).children('img').attr('src');
});

answered Feb 27, 2012 at 0:03

josh3736

146k34 gold badges227 silver badges273 bronze badges

Collectives™ on Stack Overflow

Passing Event data to callback function with jQuery

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related