jquery retrieve relatedTarget.data('url') value

Question

I need to retrieve the value of data-url attribute from event.relatedTarget

I tried in many ways:

e.relatedTarget.data('url')
e.relatedTarget.attr('url')
e.relatedTarget.prop('url')

but it always return an error.. but the value is there:

how can I retrieve it? thanks! Joe

Internment

Have you tried e.relatedTarget.attr('data-url'); ? – Delinda

Answer 1

Seeing as you're directly accessing the event object itself, jQuery's attr() and prop() methods will not work here as this isn't a jQuery object. You'll notice that there is no data key on the event object as well, instead the key is called dataset. Furthermore, this isn't a function, so () brackets will not achieve anything here.

Instead of e.relatedTarget.data('url'), you'll want to use:

e.relatedTarget.dataset['url']

Or:

e.relatedTarget.dataset.url

It's worth noting that this has significantly better performance than converting the event object into a jQuery object and calling one of jQuery's functions as the other answers here suggest as you have all the properties right there. All jQuery will do is convert it back into the object you already have and access the property in a very similar way to what I've included above, so rather than going directly from A to B, you'd end up going from A to C then back to A to B.

Selfpreservation

You are right about the performance; although that is an argument you could make pro vanilla JS over jQuery in general :) Accessing DOM properties on a DOM object directly will always be faster, but for consistency some people prefer to not mix the two “styles,” and work with jQuery objects everywhere. Anyway, OP has all the info needed to make their own decision now. – Aperture

@CBroe jQuery has great methods, but reading values will always be faster with native JavaScript. The only time jQuery is the same speed as native JavaScript is when you start with a jQuery object initially, which this question doesn't. You'll have probably seen a lot of people comment on various questions and answers about how this.value is better than $(this).val(). This is an identical situation to that. – Selfpreservation

@CBroe ...and to expand on why: this.value reads the value property of this. $(this).val() casts this into a jQuery object, then executes the object's val() function on it, which causes jQuery to convert it back into a non-jQuery object ($(this) -> this) and read its value attribute. It's a longer-winded way of getting to the same result. (It's actually even slower than that, as it has to check which type of element it is first (as jQuery allows textarea elements' text to be read through val(), even though those have no native value property). – Selfpreservation

Yes, I’m aware of all that. But it is probably one of those “optimizations” that don’t actually matter much in reality. (Although, specifically in a case like this it might make a difference - depends on what event is actually handled here, and how often it occurs.) – Aperture

Answer 2

$(e.relatedTarget).data('url');

This is a js element. To use data() function, you have to make that element a jquery element.

Property

Answer 3

e.relatedTarget returns the reference to a DOM element, not a jQuery object.

So before you can call jQuery methods on it, you need to create a jQuery object from it:

$(e.relatedTarget).data(…)

Aperture