javascript - 如何更改创建表单输入的链接，以允许用户创建无限数量的表单输入？

Question

我有这段 JQuery 代码，它允许我在选中复选框时显示隐藏的 div。

  <script>
  $(function() {
    // run the currently selected effect
    function runEffect() {
      // get effect type from
      var selectedEffect = $( "#effectTypes" ).val();

      // most effect types need no options passed by default
      var options = {};
      // some effects have required parameters
      if ( selectedEffect === "scale" ) {
        options = { percent: 100 };
      } else if ( selectedEffect === "size" ) {
        options = { to: { width: 280, height: 185 } };
      }

      // run the effect
      $( "#effect" ).show();
    };

    // set effect from select menu value
    $( "#button" ).click(function() {
      runEffect();
      return false;
    });

    $( "#effect" ).hide();
  });
  </script>

在该隐藏部分内，我有一个链接，可以拉出另一个名为 add_sub_name 的表单输入。

<fieldset>
    <legend>Yes<input type="checkbox"></legend>
        <span class="subunits">
            <span title="add_sub_name">Additional Subunit Name:</span><br />
                <?= $form->render('add_sub_name'); ?>
            <br>
            <a href="#" id="button">Add another subunit?</a>
        </span>
        <div id="effect">
            <!--  <h3>Show</h3> -->
            <p>
                <span title="add_sub_name">Additional Subunit Name:</span><br />
                <?= $form->render('add_sub_name'); ?>
            </p><br>
        </div>
</fieldset>

这一切都正常，但我想知道如何更改表单，以便 add_sub_name 输入在选择时不会显示一次，而是多次显示。例如，用户可以创建无限数量的名为 add_sub_name 的 hmtl 输入。

我怎样才能做到这一点？

Answer 1

单击按钮后，只需插入包含输入的 HTML。

$("#button").click(function(e) {
    $('<div>' + 
        '<span title="add_sub_name">Additional Subunit Name:</span><br />' +
        '<input type="text" name="add_sub_name" />' +
      '</div>')
    .hide()
    .insertBefore(this)
    .slideDown();
});