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

Ответ 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'); }
    });
  }
});

Надеюсь, что это поможет

Ответ 2

попробуйте это:

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

теперь добавьте это в свой div (в этом примере он имеет идентификатор "item"):

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

конечно, для динамических значений вам нужно сделать это внутри цикла с повторяющимися значениями поля имени или идентификатора кнопки.

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

Ответ 3

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

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

Ответ 4

См. это о том, как создавать элементы с помощью jQuery Каков наиболее эффективный способ создания элементов HTML с помощью jQuery?

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

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