Php 加入&；动态删除嵌套（两级）输入元素？_Php_Javascript_Jquery_Html

Php 加入&；动态删除嵌套（两级）输入元素？

php javascript jquery html

Php 加入&；动态删除嵌套（两级）输入元素？,php,javascript,jquery,html,Php,Javascript,Jquery,Html,这个问题我搜索了好几次，但都没有找到答案，这就是我为什么要问这个问题的原因。我已经知道如何添加和删除一级输入元素，如下所示： <script type="text/javascript"> $(document).ready(function() { $('#btn_addOpt').click(function () { var opt = $('<div></div>'); opt.a

这个问题我搜索了好几次，但都没有找到答案，这就是我为什么要问这个问题的原因。我已经知道如何添加和删除一级输入元素，如下所示：

<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>


$（文档）.ready（函数（）{
$（'#btn_addOpt'）。单击（函数（）{
var opt=$（''）；
opt.append（“答案：”）；
选择附加（“”）；
$（'#opt'）。附加（opt）；
});
$（'#btn_removeOpt'）。单击（函数（）{
$（'#opt div:last'）。删除（）；
});             
});

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>


$（文档）.ready（函数（）{
$（'#btn_addQues'）。单击（函数（）{
var que=$（''）；
追加（“问题是什么？”）；
que.附加（“”）；
que.附加（“”）；
追加（“
”）；
追加（“
”）；
$（'问题'）。附加（que）；
});
$（'btn_removeQues'）。单击（函数（）{
$（“#问题div:last”）.remove（）；
})
$（'#btn_addOpt'）。单击（函数（）{
var opt=$（''）；
opt.append（“答案：”）；
选择附加（“”）；
$（'#opt'）。附加（opt）；
});
$（'#btn_removeOpt'）。单击（函数（）{
$（'#opt div:last'）。删除（）；
});             
});

身体变成：

<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事件重新绑定到新组中创建的新html元素。因此，在复制HTML之后，您需要执行$（“#btn_addQues）。单击（“etc…”），以便考虑为它们创建可重用的函数

但是，如果要使用id，它们必须是唯一的。

我不确定我是否理解，但您的意思是，因为它有多个添加和删除应答按钮。我应该为每个按钮重新绑定一个唯一的id吗？现在，您可以将onclick事件绑定到document.ready。因此，当呈现页面时，它将查找该页面上存在的所有元素t time，并运行绑定。当您单击按钮并创建新的HTML时，原始绑定时，该额外的HTML不在DOM中。因此，要向该新HTML添加单击事件，需要在生成HTML后触发绑定事件……是的，您需要为页面上的每个元素提供唯一的id，否则为y你应该使用classes.ID来标识DOM中唯一的元素。