Блог

Я перепробовал все, что мог придумать.

Примечание: я пробовал настройку <button type="button"> , и это не исправило ее.

Начальная кнопка с тем же классом и тем же вызовом функции jQuery работает абсолютно нормально. Кнопка удаления работает. Это только вторая кнопка добавления поля ввода, которая отправляет форму.

Вот jFiddle, который я настроил, чтобы вы могли сразу протестировать его функциональность:

Обратите внимание, что в JSFiddle, если вы продолжаете нажимать верхнюю кнопку добавления, добавляется больше полей ввода.

Демонстрация кода в формате JSFiddle

jQuery

 $(document).ready(function() {
    var max_fields = 100;
    var wrapper = $(".wrapper");
    var add_button = $(".new-skill-field");

    var i = 1;
    $(add_button).click(function(e) {
        e.preventDefault();
        if (i < max_fields) { 
            i  ; 
            $(wrapper).append('<div><label>Skill Name:</label><input type="text" name="skillName[]" required><label>Skill Level:</label><input type="text" name="skillLevel[]" class="input-small" required><button class="new-skill-field">Add Another Skill</button><button class="remove-skill">Remove This Skill</button></div>');
        }
    });

    $(wrapper).on("click", ".remove-skill", function(e) {
        e.preventDefault();
        $(this).parent('div').remove();
        i--;
    });
});
  

HTML

 <div class="wrapper">
    <div>
        <label>Skill Name:</label>
        <input type="text" name="skillName[]" id="skillName" required>
        <label>Skill Level:</label>
        <input type="text" name="skillLevel[]" id="skillLevel" class="input-small" required>
        <button class="new-skill-field">Add Another Skill</button>
    </div>
</div>
  

Вы можете использовать on событие и слушать дальше document

 $(document).on("click", ".new-skill-field", function(e) {
}
  

Проверьте эту скрипку

измените привязку события к уровню документа, чтобы все будущие элементы управления тоже были подобраны

 $(document).ready(function() {
  var max_fields = 100;
  var wrapper = $(".wrapper");
  var add_button = $(".new-skill-field");

  var i = 1;
  $(document).on('click', ".new-skill-field", function(e) {
    e.preventDefault();
    if (i < max_fields) {
      i  ;
      $(wrapper).append('<div><label>Skill Name:</label><input type="text" name="skillName[]" required><label>Skill Level:</label><input type="text" name="skillLevel[]" class="input-small" required><button class="new-skill-field">Add Another Skill</button><button class="remove-skill">Remove This Skill</button></div>');
    }
  });

  $(wrapper).on("click", ".remove-skill", function(e) {
    e.preventDefault();
    $(this).parent('div').remove();
    i--;
  });
});