Добавление дополнительного вводимого текста после клонирования JQuery

Я относительно новичок в 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>

Меня смущает вопрос. Это больше похоже на заявление, которое просит меня задать больше вопросов. Например, что означает «Теперь предположим, что я добавляю предварительное условие, оно клонирует первую форму, но в клонированной форме я не могу ни добавить, ни удалить какие-либо поля ввода. Это моя проблема».?

— 30.03.2021 00:56

@StackSlave В двух словах: динамически добавляемый элемент <span> не запускает прослушиватель событий щелчка.

— 30.03.2021 00:58

javascript jquery forms clone

30.03.2021 00:35

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Нельзя использовать:

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

Как и при добавлении новой формы, эти селекторы больше не будут работать, и на добавленной вами кнопке добавления не было никаких событий. Вместо этого используйте:

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

Если вы нацеливаете документ на что-то, что-то может быть динамически добавлено и нацелено. и позже:

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

target нажмите 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>

30.03.2021 00:48

Ответ принят как подходящий

Это связано с тем, как вы выбираете элемент wrapper.

Когда страница загружается, вы получаете элемент wrapper с $(".form-input");. Это означает, что вы выбрали элементы с классом .form-input, которые в настоящее время находятся на странице. Это прекрасно работает.

Однако отсюда вы клонируете свою форму и создаете второй элемент с .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> представляет собой отдельную сущность и не может работать вместе с другими формами.

Ваши кнопки добавления элементов не работают.

— 30.03.2021 00:58

@ikiK, ты прав. Теперь они исправлены.

— 30.03.2021 01:07

@EmielZuurbier Итак, вы бы порекомендовали мне обернуть основную часть формы в div и clone div, чтобы все оставалось внутри формы? Как <form class = "..."> <div class = "container> --code-- </div> </form>

— 30.03.2021 01:46

Да, точно. Тогда элемент .container будет тем элементом, который вы клонируете. Когда вы отправите все значения всех добавленных полей, они будут отправлены в единой форме.

— 30.03.2021 10:37

@EmielZuurbier Круто! Большое спасибо за помощь!

— 30.03.2021 18:47

30.03.2021 00:56