Динамически создавать кнопки с помощью JQuery

Question

Мне нужно создать 10 кнопок динамически с помощью Jquery и установить для них текст на 1 -10 и добавить одно и то же событие клика ко всем из них.

Должен ли я использовать элемент dom create или что-то еще?

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

Надеется, что это помогает

Answer 2

Смотрите это о том, как создать элементы, используя JQuery What is the most efficient way to create HTML elements using jQuery?

Кроме того, как только вы создали элемент, чтобы прикрепить события, которые вы должны будете использовать Живой() ключевое слово.

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

Answer 3

попробовать этот

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

Теперь добавьте это в некоторую DIV называется варом

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

из-конечно, вы должны сделать это в loop и добавить итерированное значение к имени или идентификатору fie л.д. кнопки, чтобы создать динамическое присвоение имен кнопки ..

надеюсь, что концепция помогает :)

Answer 4

Я создал этот маленький парень. Подумайте отдельные функции избыточна, но это то, что вопрос, заданный для (я думаю):

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