javascript - 在 javascript 中的 jquery 中创建按钮

Question

我正在寻找一种更有效的方法来构建按钮并为它们分配操作。我正在使用的网站完全用 javascript 编写。我试图实现这一点：

var test = $('<button/>', {
    text: i, //set text 1 to 10
    id: 'btn_'+i,
    click: function () { alert('hi'); }
});

但我收到一个错误“未捕获的错误：NotFoundError：DOM Exception 8”。有没有人有一个简洁的解决方案来创建带有在 Javascript 中分配的操作的按钮？任何帮助是极大的赞赏。

谢谢！

Answer 1

尝试这个：

for(i=1;i<=10;i++)
{
    var test = $('<button/>', {
        text: i, //set text 1 to 10
        id: 'btn_'+i,
        click: function () { alert('hi'); }
    });
    $('body').append(test);
}

Answer 2

这是一个“简洁的解决方案”，试试这个，$('<button/>').click( function(){}).attr('text',i).attr('id','btn_'+i).appendTo('body') （请填写循环和其他内容：）

Answer 3

试试下面的代码

var i=0;
$(function () {
    var test = $('<button/>', {
        text: i,
        class:'btn',
        id: 'btn_' + i        
    });
    i++;
    var test1 = $('<button/>', {
        text: i, 
        class:'btn',
        id: 'btn_' + i        
    });

    $(document).on('click','.btn',function(){
        alert($(this).attr('id'));
    });

    $('#mydiv').append(test);
    $('#mydiv').append(test1);
});

检查 jsFiddle http://jsfiddle.net/vijaypatel/QgdsC/上的工作示例

Answer 4

“未捕获的错误：NotFoundError：DOM 异常 8”

错误，因为你没有i在你的代码中设置..所以它是未定义的......

 var test = $('<button/>', {
   text: i, //set text 1 to 10 //<----here
   id: 'btn_'+i,
   click: function () { alert('hi'); }
 });

如果您需要 i 为 1 - 10 的值，那么您可以使用循环

$(document).ready(function(){
for(i=1;i<=10;i++)
{
   var test = $('<button/>', {
     text: i, //set text 1 to 10 //<----here
     id: 'btn_'+i,
     click: function () { alert('hi'); }
   });
}
});