Add css class to dynamic button using jQuery

Question

I am creating dynamic buttons using jQuery, is there a way to add CSS class to it while creating it, what I want to avoid is to write another line of JavaScript to add CSS class to it, unless there is no other way. Find the code snippet below,

 $.each(data, function (index, value) {
       var button =  $('<button/>', {
              text: value, 
              id: 'btn_' + index,
              click: function () { MNS.ButtonClick(this) }
       });
       $('#MyDiv').append(button);
 });

do we have something like this,

  $.each(data, function (index, value) {
        var button =  $('<button/>', {
               text: value, 
               id: 'btn_' + index,
               **css:'Myclass'**
               click: function () { MNS.ButtonClick(this) }
        });
        $('#MyDiv').append(button);
  });

"class" : "myClass"

FBHY
– FBHY

2015-10-19 12:58:38 +00:00
Commented Oct 19, 2015 at 12:58 — FBHY
– FBHY, Commented Oct 19, 2015 at 12:58

Satpal · Accepted Answer · 2015-10-19 12:58:18Z

5

You can set class in constructor

$.each(data, function (index, value) {
    var button =  $('<button/>', {
        "class" : "myClass" //Set the CSS to be add 
    });
});

OR, use the method addClass on created object

button.addClass('myClass')

answered Oct 19, 2015 at 12:58

Satpal

134k13 gold badges168 silver badges171 bronze badges

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

Comments

Nishit Maheta · Accepted Answer · 2015-10-19 13:19:03Z

2

use below code . use class as parameter.

var button =  $('<button/>', {
        class : "className",
        click: function () { MNS.ButtonClick(this) }
});

edited Oct 19, 2015 at 13:19

answered Oct 19, 2015 at 13:00

Nishit Maheta

6,0413 gold badges19 silver badges32 bronze badges

Collectives™ on Stack Overflow

Add css class to dynamic button using jQuery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related