動態創建按鈕與jquery

Question

我需要動態創建10個按鈕與jquery並將其上的文本設置爲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

看到這個關於如何使用jQuery What is the most efficient way to create HTML elements using jQuery?還創建元素

，一旦你已經創建的元素，附加你需要使用Live（）關鍵字的事件。

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

Answer 3

試試這個

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

現在把這段一些DIV稱爲變種

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

的課程

，你需要做的是在循環並將迭代的值附加到名稱或ID fie按鈕的LD，創建一個按鈕的動態命名..

希望的概念幫助:)

Answer 4

我創造了這個小傢伙。想想各個功能是矯枉過正，但是這是問的問題（我認爲）：

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