【问题标题】：duplication problems in dynamic forms动态形式的重复问题
【发布时间】：2015-09-22 13:53:23
【问题描述】：

我正处于创建动态表单的第一阶段。问题是，当我再次单击表单的按钮时，表单会加倍添加。第一次点击，就正常了，加个表单就好了。

代码：

<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 内容。

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

【问题讨论】：

为什么没有表单元素的名称（输入、选择）？
您可以使用 first() 函数获取第一个 li。通过工作演示查看我的答案here

标签： javascript jquery html forms

【解决方案1】：

试试这个：

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

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel-body panel-primary">
  <ul id="lista" style="list-style-type: none">
    <li id="listap">
      <form class="formPregunta">
        <div class="form-group">
          <label>Pregunta:</label>
          <input type="text" name="text">
        </div>
        <div class="form-group">
          <label>tipo respuesta:</label>
          <select name="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>

您需要考虑以下几点：

一个文档中不应有多个id
var newF = $('#lista').html(); 将返回整个 DOM 存在于容器中，因此您将在每次点击时获得 n*2 元素
作为稍后附加的按钮，没有事件binded，因此您需要使用event delegation
你应该有name 属性来处理表单服务器端

【讨论】：

【解决方案2】：

Demo

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

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

    });
});

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

【讨论】：

【解决方案3】：

现在您也可以尝试下面的 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);
    });
});

谢谢！

【讨论】：