jQuery 如何使用jquery动态添加按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18226598/
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
How to add a button dynamically using jquery
提问by Souparnika
My task is to add button dynamically to the div.. here is the code that i follow to add button dynamically but its not working please give me a solution for this
我的任务是将按钮动态添加到 div .. 这是我用来动态添加按钮的代码，但它不起作用请给我一个解决方案
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
function test() {
var r = "$('<input/>').attr({
type: "button",
id: "field"
})";
}
$("body").append(r);
</script>
</head>
<body>
<button onclick="test()">Insert after</button>
</body>
</html>
code to append button on div when page loads but its not working
当页面加载但它不起作用时在div上附加按钮的代码
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
function test() {
var r=$('<input/>').attr({
type: "button",
id: "field"
});
test().append("#test");
}
</script>
</head>
<body>
<div id="test"></div>
<button id="insertAfterBtn" onclick="test()">Insert after</button>
</body>
</html>
回答by Robin Leboeuf
Your append line must be in your test()function
您的追加行必须在您的test()函数中
EDIT:
编辑：
Here are two versions:
这里有两个版本：
Version 1: jQuery listener
版本 1：jQuery 侦听器
$(function(){
$('button').on('click',function(){
var r= $('<input type="button" value="new button"/>');
$("body").append(r);
});
});
Version 2: With a function (like your example)
版本 2：带有函数（如您的示例）
function createInput(){
var $input = $('<input type="button" value="new button" />');
$input.appendTo($("body"));
}
Note: This one can be done with either .appendToor with .append.
注意：这可以用.appendTo或来完成.append。
回答by Arun P Johny
the $("body").append(r)statement should be within the testfunction, also there was misplaced "in the testmethod
该$("body").append(r)声明应该是内部test的功能，也有是没有道理"的test方法
function test() {
var r=$('<input/>').attr({
type: "button",
id: "field",
value: 'new'
});
$("body").append(r);
}
Demo: Fiddle
演示：小提琴
Update
In that case try a more jQuery-ish solution
更新
在这种情况下，请尝试更像 jQuery 的解决方案
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
$('#mybutton').one('click', function(){
var r=$('<input/>').attr({
type: "button",
id: "field",
value: 'new'
});
$("body").append(r);
})
})
</script>
</head>
<body>
<button id="mybutton">Insert after</button>
</body>
</html>
Demo: Plunker
演示：Plunker
回答by sangram parmar
Try this:
尝试这个：
<script type="text/javascript">
function test()
{
if($('input#field').length==0)
{
$('<input type="button" id="field"/>').appendTo('body');
}
}
</script>
回答by Shubham Chandra
To add dynamic button on the fly;
动态添加动态按钮；
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
function newButtonClickListener() {
alert("Hello World");
}
function test() {
var r = $('<input/>').attr({
type: "button",
id: "field",
value: "New Button",
onclick: "newButtonClickListener()"
});
$("body").append(r);
}
</script>
</head>
<body>
<button onclick="test()">Insert after</button><br/>
</body>
</html>
回答by Nicolae Olariu
Working plunk here.
在这里工作。
To add the new input just once, use the following code:
要仅添加一次新输入，请使用以下代码：
$(document).ready(function()
{
$("#insertAfterBtn").one("click", function(e)
{
var r = $('<input/>', { type: "button", id: "field", value: "I'm a button" });
$("body").append(r);
});
});
[... source stripped here ...]
[...源代码在这里剥离...]
<body>
<button id="insertAfterBtn">Insert after</button>
</body>
[... source stripped here ...]
[...源代码在这里剥离...]
To make it work in w3 editor, copy/paste the code below into 'source code' section inside w3 editor and then hit 'Submit Code':
要使其在 w3 编辑器中工作，请将以下代码复制/粘贴到 w3 编辑器内的“源代码”部分，然后点击“提交代码”：
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<button id="insertAfterBtn">Insert only one button after</button>
<div class="myClass"></div>
<div id="myId"></div>
</body>
<script type="text/javascript">
$(document).ready(function()
{
// when dom is ready, call this method to add an input to 'body' tag.
addInputTo($("body"));
// when dom is ready, call this method to add an input to a div with class=myClass
addInputTo($(".myClass"));
// when dom is ready, call this method to add an input to a div with id=myId
addInputTo($("#myId"));
$("#insertAfterBtn").one("click", function(e)
{
var r = $('<input/>', { type: "button", id: "field", value: "I'm a button" });
$("body").append(r);
});
});
function addInputTo(container)
{
var inputToAdd = $("<input/>", { type: "button", id: "field", value: "I was added on page load" });
container.append(inputToAdd);
}
</script>
</html>
回答by Eswara Reddy
Try this
尝试这个
function test()
{
$("body").append("<input type='button' id='field' />");
}
