Créer dynamiquement des boutons avec Jquery

Question

J'ai besoin de créer 10 boutons dynamiquement avec Jquery et de définir le texte sur 1 -10, et d'ajouter le même événement click à chacun d'entre eux.

Devrais-je utiliser l'élément dom create ou autre chose?

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

Voir ce sur la façon de créer des éléments en utilisant jQuery What is the most efficient way to create HTML elements using jQuery?

En outre, une fois que vous avez créé l'élément, pour attacher des événements dont vous aurez besoin d'utiliser le mot-clé en direct().

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

Answer 3

essayer

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

ajoutent maintenant ce à quelque div appelé var

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

de plats dont vous avez besoin de le faire en boucle et ajouter une valeur itérée au nom ou à l'ID fie ld du bouton, pour créer nommage dynamique d'un bouton ..

espère que le concept aide :)

Answer 4

J'ai créé ce petit gars. Pensez les différentes fonctions sont overkill, mais c'est ce que la question a demandé (je pense):

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