1

In every jQuery event jQuery provides the currentTarget which is the same as this, but as far as I understand the properties of currentTarget depend on your browser.

In chrome I can get event.currentTarget.dataset which gives me the data from the element that started the event but I don’t think this works in all browsers. The only cross browser solution that I know of is to get the data by wrapping the currentTarget in another jQuery object like below.

var div = jQuery("<div/>").data("numbers", [1,2,3]);
div.click(function(e) {
  var data = jQuery(e.currentTarget).data();
  console.log(data.numbers);
});

Does anyone know a cross browser solution to get the data without creating a new jQuery object with this/currentTarget?

Update: Just to be clear and the reason I ask:

We are converting the element that triggered the event into a jQuery object again, sending it through jQuery a second time (it was already a jQuery object to create the event). I'm hoping for a way to carry the already created jQuery object into the event. Slides 44 & 45 on this presentation explain my thought process.

You can do this with event.currentTarget.dataset but I don't think its a cross browser solution. In the code above you could use the cached jQuery object div to get the data without recreating a jQuery object. That works for that specific example, but what would you do with a dynamic event like the delegate event below:

jQuery("#container").on('click', '.pop-data', function(e) {
  var data = jQuery(e.currentTarget).data();
  alert(data);
});

The code above works and is not a bad solution but does anyone know a way to get the data without creating a new jQuery object?

Dol
  • 944
  • 3
  • 10
  • 25
  • why do you want a different solution? – Arun P Johny Sep 02 '14 at 06:42
  • What's the problem with sticking to way jQuery was written to be used? – scrowler Sep 02 '14 at 06:45
  • @arun Performance. Its for a plugin. – Dol Sep 02 '14 at 06:47
  • @scrowler is this the way it was meant to be used? – Dol Sep 02 '14 at 06:48
  • 2
    jQuery is built to use `this` to reference self... what's the point in re-writing this? Especially if you're concerned about browser compatibility - that's one of the reasons jQuery was written! – scrowler Sep 02 '14 at 06:50
  • 1
    I don't think using the jQuery data api causes a considerable overhead.. – Arun P Johny Sep 02 '14 at 06:50
  • @scrowler As far as I understood wrapping `this` in jQuery converts it into a jQuery object again, while it was already a jQuery object to create the event. I'm hoping for a way to carry the already created jQuery object into the event. Slides 44 & 45 in http://addyosmani.com/jqprovenperformance/ explain my thought process. – Dol Sep 02 '14 at 06:58

1 Answers1

1

Look down at the accepted answer for

Having problems in IE8 when attempting to get data from target event

jQuery("#container").on('click', '.pop-data', function(e) {
  console.log($(e.target).attr('data-numbers'));
});

Personally, I couldn't get the .data() jQuery stuff to work (not sure why) but the above works with sticking the HTML attribute in-line.

<img src='...' data-numbers='1'>
Community
  • 1
  • 1
Blamkin86
  • 1,029
  • 8
  • 8
  • Thanks for contributing. Unfortunately I'm using jQuery data slightly differently, I'm not attaching it to data attributes, I'm attaching it in the script using the jQuery data method to set it. The answer I'm looking for is how to access data from the event variable (e) carried in the event rather than wrapping it in a jQuery function again. It is accessible but through a data property called dataset in currentTarget that I'm not sure is carried in every browser. – Dol Mar 20 '15 at 08:24
  • You can get your data by calling data without the "data-" and converting the rest to lower camel case. But in your case using getAttribute on target or currentTarget (without jQuery) is better. I think that method goes back to IE 5. – Dol Mar 20 '15 at 08:25