jquery variable seems to never get set after the first click

Question

This is probably simple but the answer alludes me at this time. I have a button that I have attached a data attribute to ('data-faqid')

clicking on links on the webpage changes this data then when I click that button I am trying to get the value like so

   $('#faqSaveBtn').click(function () {
        var aFAQID = $(this).data('faqid');
        saveAClassFaq(aFAQID, sf);
    });

My problem is this:

I click on the button once and the value seems fine. I click on other buttons that should change this data attribute and they seem to work when looking at the dom but the second and any other click always returns the value of the first time I clicked the button.

EDIT: I change the faqid with this bit of code - in other click events

$('#faqSaveBtn').attr('data-faqid', iFaqID);

don't use the same id on several elements... id's need to be unique — Timotheus0106, May 05 '15 at 08:30
post your html and js code that changes the value of the data attribute. — dsharew, May 05 '15 at 08:32
@TimotheusTriebl - its the only button with that id on the page — braindice, May 05 '15 at 08:34
@braindice its matter if you are going to use the same name in several elements. but you said that its the only button that has that id. so how you trigger the other button? — kenken, May 05 '15 at 08:40
Just a shot in the dark, but are you sure that the other times you set the data that you're overwriting and not just adding several data-faqid="" tags on the same element? Causing the 'get' to just return the first one found — NachoDawg, May 05 '15 at 08:41
Did you mention that "faqid" is a pretty bad ID in terms of http://en.wikipedia.org/wiki/Homophone? :D iFaqID makes it even more hilarious :D — OddDev, May 05 '15 at 08:45
possible duplicate of [.prop() vs .attr()](http://stackoverflow.com/questions/5874652/prop-vs-attr) — vinayakj, May 05 '15 at 08:45

score 2 · Accepted Answer · answered May 05 '15 at 08:42

2

Don't use .attr() to set the data property. There is a difference between attributes (those are only valid for the HTML source) and their resulting properties (properties will be parsed once from the HTML source)

In order to change them you'd have to use .prop() or rather (in case of data properties) .data(name, value) to set the property

$('#faqSaveBtn').data('faqid', iFaqID);

answered May 05 '15 at 08:42

devnull69

16,402
8
50
61

great answer - helps a lot – braindice May 05 '15 at 08:45
I did a test a while back and it turned out that `.attr` was quicker than using `.data` so I use `.attr` for all my data attributes. – Jamie Barker May 05 '15 at 08:48
See [this](http://stackoverflow.com/questions/9783598/save-object-states-in-data-or-attr-performance-vs-css) question and answer. – Jamie Barker May 05 '15 at 08:57
@JamieBarker, unless you are doing 100s/1000s of attribute changes in a single go, the speed difference between data and attr is negligible, and if you are using that much data than it should probably be stored somewhere else besides the dom – Patrick Evans May 05 '15 at 08:59

score 1 · Answer 2 · answered May 05 '15 at 08:44

1

Okay I dont know why he deleted it or if someone else did but @newmediafreek posted this

$('#faqSaveBtn').data('faqid', iFaqID);

This seems to work but not sure exactly why. Apparently '.attr' is not used anymore or depreciated? (who can keep up anymore?)

answered May 05 '15 at 08:44

braindice

988
5
16

Yes, the usage of attr has changed quite a lot over time and with jquery 1.7 (afaik) they added .prop in order to reflect the difference between attributes and properties – devnull69 May 05 '15 at 08:45
In short `attr` gives static value and `prop` gives dynamic value – vinayakj May 05 '15 at 08:46

score 1 · Answer 3 · answered May 05 '15 at 08:44

The problem is that you are updating the element attribute, but then trying to use jQuery's internal .data().

The solution is to update the value using .data() not .attr().

$('#faqSaveBtn').data('faqid', iFaqID);

What happens is:

The first time the button is clicked, it has a data attribute, and $(this).data('faqid') returns that value. jQuery has now started managing the faqid in its internal data storage, it no longer looks at the element attribute for the value.
You update the attribute value using attr('data-faqid', iFaqID). The attribute changes, but the jQuery internal data is not affected.
The second click comes, and $(this).data('faqid') returns the value stored in the jQuery internal data structure

jquery variable seems to never get set after the first click

3 Answers3