Set Value to data attribute using jquery for dynamically generated input element [duplicate]

Question

Created a new input element and tried adding the data attribute using the data method in jquery but am not able to append the value

Js Fiddle to the above issue

var txtBox = $('<input/>', {
  "class": "myCustomClass",
  "type": "text"
});
$('#wrapper').append(txtBox);
txtBox.data('index', '1');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='wrapper'>Input Text Box : </div>

Your code is working fine: jsfiddle.net/bb69fgbj/3. The source of your confusion is most likely because data() does not update the DOM, so the data-index attribute will not appear in the inspector. So long as you use the getter of data() to retrieve the value, you will have no issues: var index = txtBox.data('index') — Rory McCrossan
– Rory McCrossan, Commented Dec 18, 2017 at 10:34
In addition to @RoryMcCrossan's comment, if you want the data to be shown on HTML, you can use attr method. — 31piy
– 31piy, Commented Dec 18, 2017 at 10:35

Anup Yadav · Accepted Answer · 2017-12-18 10:35:58Z

0

 var txtBox = $('<input/>', {
                "class" : "myCustomClass",
                "type" :"text",
                "data-index":""
            });
$('#wrapper').append(txtBox);           
txtBox.attr('data-index','ddddddddd');

answered Dec 18, 2017 at 10:35

Anup Yadav

3,0153 gold badges23 silver badges31 bronze badges

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

1 Comment

Anup Yadav Over a year ago

@Rory McCrossan is Right. But still if we want to confirm attr is also good option, data is html5 feature.

Lamari Taha · Accepted Answer · 2017-12-18 10:42:27Z

0

The Code is working fineI think the code you are looking for is txtBox.attr('data-index', '1');

for more info why the .data didn't work as you expected , check this answer here

answered Dec 18, 2017 at 10:42

Lamari Taha

135 bronze badges

1 Comment

Thomas Smyth Over a year ago

It is better to add the details from the link into your post in case it ever goes dead.

Collectives™ on Stack Overflow

Set Value to data attribute using jquery for dynamically generated input element [duplicate]

2 Answers 2

1 Comment

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Linked

Related