使用Jquery动态创建按钮

Question

我需要使用Jquery动态创建10个按钮,并将它们上的文本设置为1-10,并将相同的单击事件添加到所有按钮.

我应该使用dom创建元素还是其他东西？

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

试试这个

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

现在将此附加到您的div(在此示例中,它具有id"item")

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

当然,对于动态值,您需要在循环内部使用按钮的名称或ID字段的迭代值进行操作.

希望解释这个概念有帮助:)

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