Question

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

我应该使用dom create element还是其他什么？

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

Answer 4

请参阅有关如何使用jQuery What is the most efficient way to create HTML elements using jQuery?

创建元素的信息

此外，创建元素后，要附加事件，您需要使用Live（）关键字。

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

Answer 5

下面是显示按钮和调用您自己的函数并将按钮编号作为参数传递的示例。

for(i = 1; i <=10; i++) {

            $('<div class = "dynmic-buttons">')
            .append($('<button/>', {
                    text:i,
                    id:'dyn-btn'+i,
                    click: function () { DYNFUNC.dynBtnClicked($(this).text()); } 
                    }))
                    .appendTo($('#dynamic-btn-container'));
}

这里是按钮点击函数，显示各个按钮的文本

;DYNFUNC =      {   dynBtnClicked (data) {
                alert('Clicked dynamic button no:'+data);       
        }
}

使用Jquery动态创建按钮

5 个答案: