Tự động tạo các nút với Jquery

Question

Tôi cần phải tạo 10 nút động với Jquery và đặt văn bản trên chúng thành 1 -10 và thêm cùng một sự kiện nhấp vào tất cả chúng.

Tôi có nên sử dụng phần tử tạo dom hoặc một yếu tố khác không?

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

Hy vọng nó giúp

Answer 2

Xem này về cách tạo các yếu tố sử dụng jQuery What is the most efficient way to create HTML elements using jQuery?

Ngoài ra, một khi bạn đã tạo ra nguyên tố này, để đính kèm các sự kiện bạn sẽ cần phải sử dụng các từ khóa Live().

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

Answer 3

thử này

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

tại append này cho một số div gọi var

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

of-Tất nhiên bạn cần phải làm điều đó trong lặp lại và nối thêm giá trị được lặp lại vào tên hoặc ID fie ld của nút, để tạo đặt tên năng động của một nút ..

hy vọng khái niệm giúp :)

Answer 4

Tôi tạo ra anh chàng này rất ít. Nghĩ các chức năng cá nhân là quá mức cần thiết, nhưng đây là những gì các câu hỏi yêu cầu (tôi nghĩ):

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