jQuery $(this) and $("id") give different values

Question

I am having some troubles understanding why this doesn't work as I expect. Basically I have a select like this:

<select id="myId" data-option-name="myOption" onchange="_ui.updateOptions($(this));">
....
</select>

and

updateOptions: function(element) {
  var x = element.data("optionName");
}

In another branch of the code I want to do this

var x = $("#myId").data("optionName");

but I get undefined as a result, while it works inside updateOptions.

In addition, if I do this (where element = $(this) of the "myId" select)

updateOptions: function(element) {
  var y = (element == $("#myId"));
}

I get that y is false.

Am I missing something? How can I access data-option-name from inside $("myId")?

EDIT: it just occurred to me that probably (element == $("#myId")) returns false because they are 2 different jQuery objects, although they are referencing the same DOM element.

EDIT2: forgot the hashes in the posted code.. they are present in my source.

EDIT3: some more details.. these were taken using firebug with a breakpoint inside updateOptions

$("#myId").attr("id") = "myId";
element.attr("id") = "myId";
$("#myId").data("optionName") = undefined;
element.data("optionName") = "myValue";
$("#myId").data("option-name") = undefined;
element.data("option-name") = "myValue";
$("#myId").attr("data-option-name") = undefined;
element.attr("data-option-name") = "myValue";

EDIT4:

$("#myId").is(element) returns false

It's a good idea to prefix your jQuery object variable names with `$`; I would expect `element` to be a DOM element, but `$element` to be a jQuery object. — Blazemonger, Jun 25 '14 at 16:10
We need to know where and how you're calling the `updateOptions` method. It's possible you [cloned your jQuery object](http://api.jquery.com/clone/) incorrectly. Also: see the question [jQuery object equality](http://stackoverflow.com/questions/3176962/jquery-object-equality) for comparing two objects. — Blazemonger, Jun 25 '14 at 16:16
So it's `$('#myId')` that is missing attributes? The reason for this must be elsewhere in your code; nothing you've given us explains it. — Blazemonger, Jun 25 '14 at 16:22
I'm starting to believe that there is something happening since I am also using bootstrap around. The strange part is that I am sure that there is only 1 object with `id="myId"` in my page and only 2 parts that call updateOptions: one is the select itself using $(this) in the onchange, and another is where I need to call it using $("#myId"). I'll try to look some more details. Thanks — SirePi, Jun 25 '14 at 16:27
@RodneyGolpe : the select, by itself, is available at page load; then its options are added dynamically and bootstrap to change it into a dropdown. — SirePi, Jun 25 '14 at 16:29

score 1 · Answer 1 · answered Jun 25 '14 at 16:05

1

You're missing the hash:

var x = $("#myId").data("optionName");

answered Jun 25 '14 at 16:05

Maurice Perry

32,610
9
70
97

Sorry, my bad.. they are present in my code (I couldn't post it here as it is but I had to rewrite it). I fixed my question – SirePi Jun 25 '14 at 16:07

score 0 · Answer 2 · answered Jun 25 '14 at 16:35

0

I found the issue, and I feel extremely stupid now. I didn't notice that my coworker added another element with the same id in a completely different part of the page.

After changing its id, now everything works properly.

answered Jun 25 '14 at 16:35

SirePi

242
1
3
11

jQuery $(this) and $("id") give different values

2 Answers2