[英]Dynamically adding form elements to dynamic form using jquery
我遵循此示例如何使用jQuery动态添加表单元素
是否可以将表单元素动态添加到动态生成的表单中?
这是我的代码:
<html>
<script src="jquery.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
$('#addRow').click(function () {
$('<div/>', {
'class' : 'extraPerson', html: GetHtml()
}).hide().appendTo('#container').slideDown('slow');
});
$('#addAttribte').click(function () {
$('<div/>', {
'class' : 'extraAttribute', html: GetHtml1()
}).hide().appendTo('#extraAttribute').slideDown('slow');
});
})
function GetHtml() {
var len = $('.extraPerson').length;
var $html = $('.extraPersonTemplate').clone();
$html.find('[name=firstname]')[0].name="firstname" + len;
return $html.html();
}
function GetHtml1() {
var len = $('.extraAttribute').length;
var $html = $('.extraAttributeTemplate').clone();
$html.find('[name=attribute]')[0].name="attribute" + len;
return $html.html();
}
</script>
<div class="extraPersonTemplate">
<input class="span3" placeholder="First Name" type="text" name="firstname">
<a href="javascript:void(0)" id="addAttribute">Add Attribute</a>
<div id="extraAttribute"></div>
</div>
<div class="extraAttributeTemplate">
<input class="span3" placeholder="Attribute" type="text" name="attribute">
</div>
<div id="container"></div>
<a href="#" id="addRow"><i class="icon-plus-sign icon-white"></i> Add another family member</p></a>
</html>
我意识到关于新添加的表单元素的名称会有问题,但是在这一点上,我只希望能够甚至将一行文本动态添加到动态生成的表单中。
编辑:对不起,忘记提到问题所在了; 该页面开始时只有一个链接“添加其他家庭成员”。 这将添加extraPersonTemplate
。 该模板还具有“添加属性”链接,该链接将一个额外的表单字段添加到此新添加的字段中。
但是,当我单击“添加属性”时,我希望它可以将extraAttributeTemplate
添加到动态添加的表单的底部,但是什么也没有发生。
有两个具体问题。
ID应该是唯一的。 每个人的id为addAttribute
的锚点都是无效的,并且只有在DOM中找到的第一个元素才具有事件绑定。 最初这不是问题,因为只有一个,但是一旦您开始添加其他家庭成员,确实会成为问题。
就绪处理程序中绑定的事件仅绑定到代码执行时存在的元素。 如果要添加新元素以绑定这些事件,则需要使用事件委托 :
$(document).on('click', '.addAttribute', function() { // add an attribute here // I've changed from an ID to a class selector // you'll need to find a way to get a reference to the correct elements from a specific anchor });
我整理了一个包含以上详细说明的演示 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.