Crear botones dinámicamente con Jquery

Question

Necesito crear 10 botones dinámicamente con Jquery y configurar el texto en ellos para que sea 1 -10, y agregar el mismo evento de clic a todos ellos.

¿Debo usar el elemento dom create u otro?

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

creo que sirve

Answer 2

ver esto en la forma de crear elementos con jQuery What is the most efficient way to create HTML elements using jQuery?

Además, una vez que haya creado el elemento, para unir eventos que tendrá que utilizar la palabra clave en Vivo().

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

Answer 3

probar este

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

ahora añadir esto en cierta div llamado var

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

de curso que tiene que hacer en bucle y anexar valor iterado al nombre o ID fie ld del botón, para crear nombres dinámico de un botón ..

esperan que el concepto de ayuda :)

Answer 4

he creado este pequeño individuo. Piensan que las funciones individuales son una exageración, pero esto es lo que la pregunta pidió (creo):

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