Question

我已经尝试了我能想到的一切。

注意：我尝试过设置<button type="button">并且没有修复它。

初始按钮，具有相同的类和对jQuery函数的相同调用，完全正常。删除按钮有效。它只是提交表单的第二个添加输入字段按钮。

以下是我设置的jFiddle，您可以立即测试它的功能：

请注意，如果您继续单击顶部的添加按钮，它会在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>

Answer 1

将事件绑定更改为文档级别，以便将来也可以获取所有未来的控件

$(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--;
  });
});

Answer 2

您可以使用on事件并聆听document

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

选中此FIDDLE

按钮有相同的类 - 一个提交表单，另一个运行jQuery罚款

2 个答案: