jQuery .data() does not work, but .attr() does

by

I ran into a similar “bug” a few days ago when working with .data() and .attr('data-name') for HTML5 data attributes.

The behavior you’re describing is not a bug, but is by design.

The .data() call is special – not only does it retrieve HTML5 data attributes it also attempts to evaluate/parse the attributes. So with an attribute like data-myjson='{"hello":"world"}' when retrieved via .data() will return an Object while retrieval via .attr() will return a string. See jsfiddle example.

Since .data() does extra processing jQuery stores the results of attribute evaluation in $.cache – after all, once a data attribute has been evaluated it would be wasteful to re-evaluate on every .data() call – especially since data variables can contain complex JSON strings.

I said all that to say the following: After retrieving an attribute via .data() any changes made by .attr('data-myvar', '') will not be seen by subsequent .data() calls. Test this out on jsfiddle.

To avoid this problem don’t intermix .data and .attr() calls. Use one or the other.

More Related Contents:

  1. Difference between .on(‘click’) vs .click()
  2. jQuery how to find an element based on a data-attribute value?
  3. What is the difference between these jQuery ready functions?
  4. What’s the difference between `on` and `live` or `bind`?
  5. Trigger click on input=file on asynchronous ajax done()
  6. jQuery or CSS selector to select all IDs that start with some string [duplicate]
  7. jQuery ajax success anonymous function scope
  8. Can you detect “dragging” in jQuery?
  9. Update select2 data without rebuilding the control
  10. Dealing with line Breaks on contentEditable DIV
  11. Trouble with jQuery Dialog and Datepicker plugins
  12. What’s the difference between keyup, keydown, keypress and input events?
  13. How can I convert a DOM element to a jQuery element?
  14. jQuery scrollTop not working in Chrome but working in Firefox
  15. Check if username exists in database with AJAX
  16. append /remove anchor name from current url without refresh
  17. Write Content To New Window with JQuery
  18. How can I change HTML attribute names with jQuery?
  19. JSON: How do I make cross-domain JSON call
  20. finding the type of an element using jQuery
  21. Populate Select box options on click with Javascript/Jquery with Json data
  22. Modify a svg file using jQuery
  23. How do I reset a jquery-chosen select option with jQuery?
  24. How can I disable a button in a jQuery dialog from a function?
  25. Async and document ready
  26. How to use multiple jquery object variables as selectors?
  27. How to select first row of the first table in an html page using jQuery?
  28. Problems with jQuery autocomplete + AngularJS
  29. Use jQuery to check mousewheel event without scrollbar
  30. How can I extend jQueryUI datepicker to accept an additional argument?

Leave a Comment