Add data attributes to dynamically created button jQuery

Question

I am creating buttons in jQuery dynamically. I need to add data attributes:

So I saw the answer here: Dynamically create buttons with Jquery

$(document).ready(function() {
  for(i = 1; i <=10; i++) {
     $('<button/>', {
        text: i, //set text 1 to 10
        id: 'btn_'+i,
        click: function () { alert('hi'); }
    });
  }
});

I am adding the data-attributes like this:

$(document).ready(function() {
  for(i = 1; i <=10; i++) {

   $('<button/>', {
        text: i, //set text 1 to 10
        id: 'btn_'+i,
        click: function () { alert('hi'); }
    }).attr('data-test', 1).attr('data-test2', 2);

  }
});

I was thinking that if I could do something similar to the way we add text and id attributes

Arun P Johny · Accepted Answer · 2015-08-10 06:24:14Z

7

You can do that, but since the key contains - you need to pass the key as a string literal like

$(document).ready(function() {
  for (i = 1; i <= 10; i++) {

    $('<button/>', {
      text: i, //set text 1 to 10
      id: 'btn_' + i,
      click: function() {
        alert('hi: ' + $(this).attr('data-test'));
      },
      'data-test': 1
    }).appendTo('body');

  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

edited Aug 10, 2015 at 6:24

answered Aug 10, 2015 at 6:18

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

1 Comment

Jesse Fender Over a year ago

I know that this an older topic but I found this helpful and it will help others as it is the first link in google searches... You can do the same with regular attributes too...

Collectives™ on Stack Overflow

Add data attributes to dynamically created button jQuery

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related