克隆后添加额外的输入文本 JQuery

Question

我对 Javascript/jQuery 比较陌生，我正在尝试克隆一个表格来记录分数。我可以在预克隆表单中添加任意数量的输入，但我无法在后续克隆表单中添加或删除任何其他文本输入。

比方说，在我添加先决条件之前，我放置了 5 个输入框。在第一种形式中，我可以根据需要删除和添加任意数量的输入框。

现在假设我添加了一个先决条件，它将克隆第一个表单，但在克隆的表单中我无法添加或删除任何输入框。那是我的问题。

此时我对如何解决这个问题感到困惑。

$(document).ready(function() {
  var max_fields = 10;
  var wrapper = $(".form-input");
  var add_button = $(".add_item");

  var x = 1;
  $(add_button).click(function(e) {
    e.preventDefault();
    if (x < max_fields) { //max input box allowed
      x++; //text box increment
      $(wrapper).append('<div><input type="text" name="items[]"/><a href="#" class="remove_field">X</a></div>'); //add input box
    }
  });

  $(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
    e.preventDefault();
    $(this).parent('div').remove();
    x--;
  })
});

//Write code to clone form here, but set everything to default and add
//a button to remove any prerequisites.

$(document).ready(function() {
  var ctr = 1;
  $(".add_req").click(function() {
    $(".myForm").eq(0)
      .clone()
      .find("input")
      .val("")
      .end()
      .show()
      .insertAfter(".myForm:last");
  });
  $('.all').on('click', ".remove-req", function() {
    $(this).closest('.myForm').remove();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>
  <meta charset=utf-8 />
  <title>JS Bin</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="all">
    <button class="add_req">Add Preq-Requisite</button>
    <form class="myForm">
      <section class="selection-menus">

        <select name="major" class="major">
          <option selected="selected">SELECT MAJOR</option>
          <option value="CS">Computer Science</option>
          <option value="CIS">Computer Information Systems</option>
        </select>

        <select name="course-no" class="course-no">
          <option value="CS_000">SELECT COURSE</option>
          <option value="CS_140">140</option>
          <option value="CS_210">210</option>
          <option value="CS_220">220</option>

          <!--THERE IS NO CIS DATA, THIS IS JUST FOR FUNCTIONALITY-->
          <option value="CIS_000">SELECT COURSE</option>
          <option value="CIS_315">315</option>
          <option value="CIS_330">330</option>
          <option value="CIS_497">497</option>
        </select>

        <button class="add_item">Add Item</button>

      </section>

      <div class="form-input">
        <div><input type="text" name="items[]"></div>
      </div>
      <span class="remove-req">Remove Req</span>
    </form>
  </div>
</body>

Answer 1

您不能使用：

  var wrapper = $(".form-input");
  var add_button = $(".add_item");

当您添加新表单时，这些选择器将不再起作用，并且您添加的添加按钮上没有任何事件。
而是使用：

 $(document).on("click", ".add_item", function(e) {

如果您将文档定位到可以动态添加和定位的内容。及以后：

$(e.target).parents(".myForm").find(".form-input")

target 单击目标并搜索要附加到的适当元素。

$(document).ready(function() {
  var max_fields = 10;


  var x = 1;
  $(document).on("click", ".add_item", function(e) {
    e.preventDefault();
    if (x < max_fields) { //max input box allowed
      x++; //text box increment
      $(e.target).parents(".myForm").find(".form-input").append('<div><input type="text" name="items[]"/><a href="#" class="remove_field">X</a></div>'); //add input box
    }
  });

  $(".form-input").on("click", ".remove_field", function(e) { //user click on remove text
    e.preventDefault();
    $(this).parent('div').remove();
    x--;
  })
});

//Write code to clone form here, but set everything to default and add
//a button to remove any prerequisites.

$(document).ready(function() {
  var ctr = 1;
  $(".add_req").click(function() {
    $(".myForm").eq(0)
      .clone()
      .find("input")
      .val("")
      .end()
      .show()
      .insertAfter(".myForm:last");
  });
  $('.all').on('click', ".remove-req", function() {
    $(this).closest('.myForm').remove();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>
  <meta charset=utf-8 />
  <title>JS Bin</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="all">
    <button class="add_req">Add Preq-Requisite</button>
    <form class="myForm">
      <section class="selection-menus">

        <select name="major" class="major">
          <option selected="selected">SELECT MAJOR</option>
          <option value="CS">Computer Science</option>
          <option value="CIS">Computer Information Systems</option>
        </select>

        <select name="course-no" class="course-no">
          <option value="CS_000">SELECT COURSE</option>
          <option value="CS_140">140</option>
          <option value="CS_210">210</option>
          <option value="CS_220">220</option>

          <!--THERE IS NO CIS DATA, THIS IS JUST FOR FUNCTIONALITY-->
          <option value="CIS_000">SELECT COURSE</option>
          <option value="CIS_315">315</option>
          <option value="CIS_330">330</option>
          <option value="CIS_497">497</option>
        </select>

        <button class="add_item">Add Item</button>

      </section>

      <div class="form-input">
        <div><input type="text" name="items[]"></div>
      </div>
      <span class="remove-req">Remove Req</span>
    </form>
  </div>
</body>

Answer 2

这与您 select 您的 wrapper 元素的方式有关。

当页面加载时，您将获得带有 $(".form-input"); 的 wrapper 元素。这意味着您现在已经 select 使用当前页面上的 .form-input class 编辑了元素。这很好用。

但是，您可以从这里克隆表单并使用来自原始表单的 .form-input 创建第二个元素。但这里的区别在于 wrapper 变量从未在第二个 .form-input 中找到，因为它还不存在。所有后续的 .form-input 元素都将计算在内。

解决此问题的方法是更改 .remove_field 的事件侦听器。不要只听第一个 wrapper，而是在 document 上听 click。所有点击最终都会冒泡到文档，除非它们被拦截和停止。

$(document).ready(function() {
  var max_fields = 10;
  var wrapper = $(".form-input");
  var add_button = $(".add_item");

  var x = 1;
  $(document).on('click', '.add_item', function(e) {
    e.preventDefault();
    var $this = $(this);
    var $formInput = $this.parent().next();
    
    if (x < max_fields) { //max input box allowed
      x++; //text box increment
      $formInput.append('<div><input type="text" name="items[]"/><a href="#" class="remove_field">X</a></div>'); //add input box
    }
  });

  $(document).on("click", ".remove_field", function(e) { //user click on remove text
    e.preventDefault();
    $(this).parent('div').remove();
    x--;
  })
});

//Write code to clone form here, but set everything to default and add
//a button to remove any prerequisites.

$(document).ready(function() {
  var ctr = 1;
  $(".add_req").click(function() {
    $(".myForm").eq(0)
      .clone()
      .find("input")
      .val("")
      .end()
      .show()
      .insertAfter(".myForm:last");
  });
  $('.all').on('click', ".remove-req", function() {
    $(this).closest('.myForm').remove();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>
  <meta charset=utf-8 />
  <title>JS Bin</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="all">
    <button class="add_req">Add Preq-Requisite</button>
    <form class="myForm">
      <section class="selection-menus">

        <select name="major" class="major">
          <option selected="selected">SELECT MAJOR</option>
          <option value="CS">Computer Science</option>
          <option value="CIS">Computer Information Systems</option>
        </select>

        <select name="course-no" class="course-no">
          <option value="CS_000">SELECT COURSE</option>
          <option value="CS_140">140</option>
          <option value="CS_210">210</option>
          <option value="CS_220">220</option>

          <!--THERE IS NO CIS DATA, THIS IS JUST FOR FUNCTIONALITY-->
          <option value="CIS_000">SELECT COURSE</option>
          <option value="CIS_315">315</option>
          <option value="CIS_330">330</option>
          <option value="CIS_497">497</option>
        </select>

        <button class="add_item">Add Item</button>

      </section>

      <div class="form-input">
        <div><input type="text" name="items[]"></div>
      </div>
      <span class="remove-req">Remove Req</span>
    </form>
  </div>
</body>

我建议您不要克隆整个 <form> 元素，因为我可以想象所有数据都必须作为一个整体发送。但是每个 <form> 元素都是它自己的实体，不会与其他形式一起工作。

克隆后添加额外的输入文本 JQuery

Adding additional input text after cloning JQuery

javascript

forms

jquery

clone