javascript - 动态形式的重复问题

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

试试这个:

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>

You need to consider following points:

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