Adding data attribute value not working

Question

I am trying to add a data attribute with a value to a li, but for some reason its not working. Iv done this before on divs but for some reason its not working correctly now.

Here is my jsfiddle http://jsfiddle.net/76MDE/1/

Here is my code.

<ul class="title-area">
    <li class="name">
        <h1><a href="#">cool</a></h1>
    </li>
</ul>

$('.name').data("element", "name");

It's working exactly as expected, jQuery's data() stores data in an internal object, it does not set attributes, that would be attr() — adeneo
– adeneo, Commented Jul 23, 2014 at 11:00

Spokey · Accepted Answer · 2014-07-23 11:00:31Z

4

.data() does not add the data-* attribute. It creates a jQuery object and it will be stored internally in a jQuery cache variable.

If you want to set the attribute you must use .attr()

$('.name').attr("data-element", "name");

answered Jul 23, 2014 at 11:00

Spokey

11k2 gold badges31 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bhushan Kawadkar · Accepted Answer · 2014-07-23 10:59:59Z

1

Use this :

$('.name').attr("data-element", "name");

Demo

answered Jul 23, 2014 at 10:59

Bhushan Kawadkar

28.6k5 gold badges39 silver badges61 bronze badges

Comments

PraJen · Accepted Answer · 2014-07-23 11:00:03Z

0

Fiddle

USE THIS

$('.name').attr("data", "element");

answered Jul 23, 2014 at 11:00

PraJen

6043 silver badges11 bronze badges

2 Comments

Regent Over a year ago

Actually it has to be $('.name').attr("data-element", "name");

PraJen Over a year ago

Question asked is to "add a data attribute with a value to a li".. Wat else i can add in this...

brainbowler · Accepted Answer · 2014-07-23 11:00:56Z

0

It IS working, as you can verify by putting a:

alert($('.name').data("element"));

It's only that the HTML is not modified.

If you want to see it in the HTML, too, use the following:

$('.name').attr("data-element", "name");

answered Jul 23, 2014 at 11:00

brainbowler

6755 silver badges17 bronze badges

Collectives™ on Stack Overflow

Adding data attribute value not working

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related