如何使用jquery仅将数据附加一次
[英]How to append the data only once using jquery
问题描述
In jquery,how to append the data(Textbox,dropdown) only once when click the button and also bind the those data with in a div tag. 
在jquery中，如何在单击按钮时仅附加数据（文本框，下拉列表），并将这些数据与div标签绑定。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test weekpicker</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function() {
$('.add_child').click(function() {
$div_open = $('<div id="container">');
$input1 = $('<input type="text" placeholder="Child Name" />');
$input2 = $('<select name="gender"><option value="0">Male</option><option value="1">Female</option></select>');
$div_close = $('</div>');
$('.append_child').append($div_open);
$('.append_child').append($input1);
$('.append_child').append($input2);
$('.append_child').append($div_close);
});
});
</script>
</head>
<body>
<div id="content">
<input type="button" class="add_child" value="Add child">
<div class="child_details">
<div class="append_child"></div>
</div>
</div>
</body>
</html>
4 个解决方案
解决方案1
6 已采纳 2014-12-18 11:44:40
You can use jquery .one() in this situation. 在这种情况下，您可以使用jquery .one（） 。
Attach a handler to an event for the elements.
You would also need to change the append logic to append input and select inside div with id container in .append_child div. 您还需要更改追加逻辑以附加输入，并在.append_child div中选择id容器内的div。 soemthing like this: 这样的东西：
$('.add_child').one('click',function() {
$div_open = $('<div id="container"></div>');
$input1 = $('<input type="text" placeholder="Child Name" />');
$input2 = $('<select name="gender"><option value="0">Male</option><option value="1">Female</option></select>');
$('.append_child').append($div_open);
$('.append_child #container').append($input1);
$('.append_child #container').append($input2);
});
解决方案2
4 2014-12-18 11:55:50
$(function() {
$('.add_child').click(
function() {
html = '<div class="container">'+
' <input type="text" placeholder="Child Name" />'+
' <select name="gender">'+
' <option value="0">Male</option>'+
' <option value="1">Female</option>'+
' </select>'+
'</div>';
$('.append_child').append(html);
$(this).unbind("click");
}
);
});
This is one way of doing it... not sure if this is what you want? 这是一种做法...不确定这是否是你想要的？
解决方案3
3 2014-12-18 11:50:07
Try this 尝试这个
$(function() {
$('.add_child').one('click',function() {
$div_open = $('<div id="container">');
$input1 = $('<input type="text" placeholder="Child Name" />');
$input2 = $('<select name="gender"><option value="0">Male</option><option value="1">Female</option></select>');
$div_close = $('</div>');
$('.append_child').append($div_open);
$('.append_child').find("#container").append($input1);
$('.append_child').find("#container").append($input2);
$('.append_child').find("#container").append($div_close);
});
});
解决方案4
2 2014-12-18 11:53:13
you have two ways 你有两种方法
bind one event to buttonlike this 将一个事件绑定到按钮状态
$('.add_child').one('click',function() {
.......
}
or disable button after the first click 首次单击后禁用或禁用按钮
$('.add_child').prop("disabled",true);//add this line in the last of function
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.