Dynamicznie twórz przyciski z Jquery

Question

Potrzebuję utworzyć 10 przycisków dynamicznie za pomocą Jquery i ustawić tekst na nich na 1 -10, i dodać to samo zdarzenie kliknięcia do wszystkich z nich.

Czy powinienem używać elementu dom create lub czegoś innego?

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

Nadzieja pomaga

Answer 2

Zobacz to, w jaki sposób tworzyć elementy przy użyciu jQuery What is the most efficient way to create HTML elements using jQuery?

Również po utworzeniu elementu, aby dołączyć zdarzeń musisz używać Live() słowa kluczowego.

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

Answer 3

spróbować tej

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

teraz dołączyć to do pewnego div o nazwie var

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

of-oczywiście trzeba to zrobić w zapętlić i dołączyć iterowaną wartość do nazwy lub ID fie ld przycisku, aby utworzyć dynamiczną nazewnictwo przycisku ..

nadzieję koncepcja pomaga :)

Answer 4

Stworzyłem ten mały facet. Pomyśl poszczególne funkcje są przesadą, ale to właśnie pytanie zadane przez (chyba):

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