使用 Jquery 动态创建按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8936652/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Dynamically create buttons with Jquery
提问by james
I need to create 10 buttons dynamically with Jquery and set the text on them to be 1 -10, and add the same click event to all of them.
我需要使用 Jquery 动态创建 10 个按钮并将它们上的文本设置为 1 -10，并向所有按钮添加相同的点击事件。
Should I be using dom create element or something other?
我应该使用 dom create element 还是其他什么？
回答by Sudhir Bastakoti
$(document).ready(function() {
for(i = 1; i <=10; i++) {
$('<button/>', {
text: i, //set text 1 to 10
id: 'btn_'+i,
click: function () { alert('hi'); }
});
}
});
Hope it helps
希望能帮助到你
回答by sree
try this:
尝试这个：
var something = $('<input/>').attr({ type: 'button', name:'btn1', value:'a button' });
now append this to your div (in this example, it has the id "item"):
现在将其附加到您的 div（在本例中，它的 id 为“item”）：
$("#item").append(something);
of course, for dynamic values, you need to do it inside a loop with iterated values of the name or ID field of the button..
当然，对于动态值，您需要在循环中使用按钮的名称或 ID 字段的迭代值来执行此操作。
hope explaining the concept helps :)
希望解释这个概念有帮助:)
回答by mmv_sat
I created this little guy. Think the individual functions are overkill, but this is what the question asked for(i think):
我创造了这个小家伙。认为单个功能是矫枉过正，但这就是问题所要求的（我认为）：
https://jsfiddle.net/mmv1219/koqpzrar/1/
https://jsfiddle.net/mmv1219/koqpzrar/1/
html:
html：
<button type="button" id="Delta1">Blast Off!</button>
<div id="insertHere"></div>
JavaScript:
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');}
回答by griegs
See this on how to create elements using jQuery What is the most efficient way to create HTML elements using jQuery?
请参阅有关如何使用 jQuery 创建元素的信息 使用 jQuery创建 HTML 元素的最有效方法是什么？
Also, once you have created the element, to attach events you'll need to use the Live() keyword.
此外，一旦您创建了元素，要附加事件，您需要使用 Live() 关键字。
$("#btn1").live("click", function(){
//Do work
});
