creating buttons in jquery in javascript

Question

I'm looking to find a more efficient way to build buttons and assign actions to them. The site I'm working with is written entirely in javascript. I tried to implement this:

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

but I get an error "Uncaught Error: NotFoundError: DOM Exception 8". Does anyone have a terse solution to creating buttons with actions assigned in Javascript? Any help is greatly appreciated.

Thanks!

Check this jsfiddle.net/QY7HD. You code works fine.. Which version of jquery you are using? — PSL
– PSL, Commented May 2, 2013 at 5:51

Rohan Kumar · Accepted Answer · 2013-05-02 05:48:58Z

1

Try this:

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

answered May 2, 2013 at 5:48

Rohan Kumar

40.7k11 gold badges81 silver badges111 bronze badges

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

Comments

vine'th · Accepted Answer · 2013-05-02 05:50:19Z

0

Here is a "terse solution", Try this, $('<button/>').click( function(){}).attr('text',i).attr('id','btn_'+i).appendTo('body') (Pls fill in the loop and other stuff :)

answered May 2, 2013 at 5:50

vine'th

5,0402 gold badges31 silver badges28 bronze badges

Comments

bipen · Accepted Answer · 2013-05-02 05:49:24Z

0

"Uncaught Error: NotFoundError: DOM Exception 8"

error because you haven't set i in you code..so it is undefined...

 var test = $('<button/>', {
   text: i, //set text 1 to 10 //<----here
   id: 'btn_'+i,
   click: function () { alert('hi'); }
 });

if you need i to be values of 1 - 10 then you can use loop

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

answered May 2, 2013 at 5:49

bipen

36.6k9 gold badges51 silver badges62 bronze badges

1 Comment

txcotrader Over a year ago

grrr... I pasted the wrong code, if I replace i with with a string value the same error is produced. Thanks for the suggestion, I will be testing here in a minute

vijay · Accepted Answer · 2013-05-02 06:17:28Z

0

Try below code

var i=0;
$(function () {
    var test = $('<button/>', {
        text: i,
        class:'btn',
        id: 'btn_' + i        
    });
    i++;
    var test1 = $('<button/>', {
        text: i, 
        class:'btn',
        id: 'btn_' + i        
    });

    $(document).on('click','.btn',function(){
        alert($(this).attr('id'));
    });

    $('#mydiv').append(test);
    $('#mydiv').append(test1);
});

Check working sample on jsFiddle http://jsfiddle.net/vijaypatel/QgdsC/

answered May 2, 2013 at 6:17

vijay

1,3531 gold badge11 silver badges15 bronze badges

Collectives™ on Stack Overflow

creating buttons in jquery in javascript

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related