使用Jquery动态创建按钮

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

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

Answer 1

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

希望能帮助到你

Answer 2

试试这个

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

现在将其附加到一个名为var的div

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

当然，您需要在循环中执行此操作并将迭代值附加到按钮的名称或ID字段，以创建按钮的动态命名。

希望这个概念有帮助:)

Answer 3

我创造了这个小家伙。 认为个别function是矫枉过正，但这是问题所要求的（我认为）：

https://jsfiddle.net/mmv1219/koqpzrar/1/

HTML：

 Blast Off! 
 

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创建元素的信息。使用jQuery 创建HTML元素的最有效方法是什么？

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

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