Dynamically create buttons with Jquery

Question

I need to create 10 buttons dynamically with Jquery and set the text on them to be 1 -10, and add the same click event to all of them.

Should I be using dom create e

Answer 1

try this:

var something = $('<input/>').attr({ type: 'button', name:'btn1', value:'a button' });

now append this to your div (in this example, it has the id "item"):

$("#item").append(something);

of course, for dynamic values, you need to do it inside a loop with iterated values of the name or ID field of the button..

hope explaining the concept helps :)

Answer 2

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

Hope it helps

Answer 3

See this on how to create elements using jQuery What is the most efficient way to create HTML elements using jQuery?

Also, once you have created the element, to attach events you'll need to use the Live() keyword.

$("#btn1").live("click", function(){ 
//Do work
 });

Answer 4

I created this little guy. Think the individual functions are overkill, but this is what the question asked for(i think):

https://jsfiddle.net/mmv1219/koqpzrar/1/

html:

<button type="button" id="Delta1">Blast Off!</button>
<div id="insertHere"></div>

JavaScript:

$('#Delta1').click(function () {
    var functions = ['btn1()', 'btn2()', 'btn3()', 'btn4()', 'btn5()', 'btn6()', 'btn7()', 'btn8()', 'btn9()', 'btn10()'];
    var div = document.getElementById('insertHere');
    var ctr = 1;
    for (var i in functions) {

        var btn = document.createElement('button');
        var txt = document.createTextNode(String(ctr));

        btn.appendChild(txt);
        btn.setAttribute('type', 'button');
        btn.setAttribute('onclick', functions[i]);
        btn.setAttribute('id', 'button' + ctr);
        div.appendChild(btn);
        ctr++;
    }
});

function btn1() {alert('button 1');}    
function btn2() {alert('button 2');}    
function btn3() {alert('button 3');}
function btn4() {alert('button 4');}
function btn5() {alert('button 5');}
function btn6() {alert('button 6');}
function btn7() {alert('button 7');}
function btn8() {alert('button 8');}
function btn9() {alert('button 9');}
function btn10() {alert('button 10');}