Question

我多次搜索这个问题，但没有得到解决方案，这就是我在这里问的原因。我已经知道如何添加和删除一级输入元素，如下所示：

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

但是，它可以动态添加和删除整组元素，但在组内，“添加答案”和“删除答案”按钮不起作用。似乎存在一些冲突。或者可能还有其他一些方法可以做到这一点。基本上，我尝试做的是通过按钮添加和删除一组元素，并且在组内还有两个按钮来添加和删除一些其他输入元素。所以它是一个嵌套（两级）元素创建。填写的所有信息都将发布到另一页。我不确定我是否清楚解释，但有人可以帮忙吗？请提供一些代码，谢谢！

Answer 1

您需要将onclick事件重新绑定到新组中创建的新html元素。因此，在复制HTML之后，您需要执行$（“＃btn_addQues）.click（”etc ...“），因此您可能需要考虑为它们创建可重用的函数。

但是，如果您打算使用ID，它们必须是唯一的。

要动态添加和删除嵌套（两级）输入元素吗？

1 个答案: