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 element or something other?

Answer 1

$(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 2

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 3

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');}

Answer 4

Below is the sample for displaying the buttons and call your own function and pass the button number as parameter.

for(i = 1; i <=10; i++) {

            $('<div class = "dynmic-buttons">')
            .append($('<button/>', {
                    text:i,
                    id:'dyn-btn'+i,
                    click: function () { DYNFUNC.dynBtnClicked($(this).text()); } 
                    }))
                    .appendTo($('#dynamic-btn-container'));
}

Here is the function for button click, which displays text of respective button

;DYNFUNC =      {   dynBtnClicked (data) {
                alert('Clicked dynamic button no:'+data);       
        }
}

Answer 5

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
 });