这个问题我查了好几次了，没有找到答案，所以才来这里问。我已经知道如何添加和删除一级输入元素，如下所示:
<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 变成:
<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>
但是，它可以动态添加和删除整组元素，但在组内，“添加答案”和“删除答案”按钮不起作用。似乎有些冲突。或者可能还有其他一些方法可以做到这一点。基本上，我尝试做的是通过按钮添加和删除一组元素，并且在该组内部还有两个按钮来添加和删除一些其他输入元素。所以这是一个嵌套(两级)元素的创建。并且所有填写的信息都会发布到另一个页面。我不确定我是否解释清楚，但有人可以帮忙吗？请提供一些代码，谢谢!
最佳答案
您需要将 onclick 事件重新绑定(bind)到新组中创建的新 html 元素。因此，复制 HTML 后，您需要执行 $("#btn_addQues).click("etc...")，因此您可能需要考虑为它们创建可重用的函数。
但是，如果您要使用 ID，它们必须是唯一的。
关于php - 动态添加和删除嵌套(两级)输入元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7958634/