的 Demo

Question

我处于创建动态表单的第一阶段。问题是，当我第二次单击表单的按钮时，表单会加倍添加。我第一次点击，它可以正常工作，只需添加一个表单。

代码：

<div class="panel-body panel-primary">
    <ul id="lista" style="list-style-type: none">
        <li id="listap">
            <form id="formPregunta" >
                <div class="form-group">
                    <label>Pregunta:</label>
                    <input type="text"> </input>
                </div>
                <div class="form-group">
                    <label>tipo respuesta:</label>
                    <select>
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                     </select>
                 </div>
                 <div class="form-group">
                     <input class="bottom" type="button" value="agregar"> </input>
                 </div>
             </form>
        </li>
    </ul>
</div>


<script type="text/javascript">
    $(document).ready();

    $('input:button').on('click', function(e){
            e.preventDefault();
            var newF = $('#lista').html();
            $('#listap').after(newF);

    });
</script>

.html（）函数的文档说：获取匹配元素集中第一个元素的HTML内容或设置每个匹配元素的HTML内容。

我不知道重复的问题是什么。另一个问题是该事件仅在第一个表单上的按钮上起作用，而在其他表单中创建的表单不起作用。任何形式的答案或建议都表示赞赏。

Answer 1

的 Demo

您可以使用first()函数获取第一个元素，如下所示

$(function () { $('input:button').on('click', function(e){ e.preventDefault(); var newF = $('#lista li').first().html(); $('#listap').after(newF); }); });

这将获得li内的第一个#lista的内容。

Answer 2

现在你也可以尝试下面的js代码，并在这里看看演示： https://jsfiddle.net/agovomov/1/

实际上，解决方案是从<li id="listap">开始从dom中取出第一个，这样就不会重复。

$(document).ready(function(){
    $('body').on('click', 'input:button', function(e) {
        e.preventDefault();
        var newF = $('#lista form:first').html();
        $('#listap').after(newF);
    });
});

谢谢！

动态表单中的重复问题

2 个答案:

的 Demo