我搜索了这个问题几次，但没有得到解决方案，这就是我在这里问的原因。我已经知道如何添加&删除一级输入元素，如下:
<script type="text/javascript">
$(document).ready(function() {
$('#btn_addOpt').click(function () {
var opt = $('<div></div>');
opt.append('<p>Answer:</p>');
opt.append('<input type="text" name="lable[]">');
$('#opt').append(opt);
});
$('#btn_removeOpt').click(function () {
$('#opt div:last').remove();
});
});
</script>
html的主体是:
<form action="" method="post">
What's the question?<br/>
<input type="text" name="name"/><br />
<input type="button" id="btn_addOpt" value="Add Answer"/>
<input type="button" id="btn_removeOpt" value="Remove Answer"/><br/>
<div id="opt"></div><br/>
<input type="submit" value="submit"/>
</form>
这个想法是当我点击"添加答案"按钮时，一组元素:
<p>Answer:</p>
<input type="text" name="lable[]">
将被添加，也将被删除后，我点击"删除答案"按钮。但是，我尝试做的是将上面的所有元素作为一个组，其中包括:
What's the question?<br/>
<input type="text" name="name"/><br />
<input type="button" id="btn_addOpt" value="Add Answer"/>
<input type="button" id="btn_removeOpt" value="Remove Answer"/><br/>
<div id="opt"></div><br/>
我尝试动态地添加&删除这个组。所以我试试:
<script type="text/javascript">
$(document).ready(function() {
$('#btn_addQues').click(function () {
var que = $('<div></div>');
que.append('<p>What''s the question?</p>');
que.append('<input type="text" name="name"/>');
que.append('<input type="button" id="btn_addOpt" value="Add Answer"/>');
que.append('<input type="button" id="btn_removeOpt" value="Remove Answer"/><br/>');
que.append('<div id="opt"></div><br/>');
$('#question').append(que);
});
$('#btn_removeQues').click(function () {
$('#question div:last').remove();
})
$('#btn_addOpt').click(function () {
var opt = $('<div></div>');
opt.append('<p>Answer:</p>');
opt.append('<input type="text" name="lable[]">');
$('#opt').append(opt);
});
$('#btn_removeOpt').click(function () {
$('#opt div:last').remove();
});
});
</script>
正文变成:
<body>
<input type="button" id="btn_addQues" value="Add Question"/>
<input type="button" id="btn_removeQues" value="Remove Question"/>
<form action="" method="post">
<div id="question"></div>
<input type="submit" value="submit"/>
</form>
</body>
但是，它可以动态地添加&删除整个元素组，但是在组内，"添加答案"answers"删除答案"按钮不起作用。似乎有一些冲突。或者可能有其他方法可以做到。基本上，我尝试做的是通过按钮添加和删除一组元素，并且在组中还有两个按钮用于添加和删除一些其他输入元素。所以这是一个嵌套的(两层)元素创建。所有填写的信息将被张贴在另一个页面上。我不确定我是否解释清楚了，但有人能帮忙吗?请提供一些代码，谢谢!
您需要将onclick事件重新绑定到新组中创建的新html元素。因此，在复制HTML之后，您需要执行$("#btn_addQues ") .click("etc…")，因此您可能需要考虑为它们创建可重用的函数。
但是，如果您要使用id，则需要它们是唯一的