Question

我有一个页面有多个表单，我需要使用相同的JavaScript代码。 JavaScript代码为表单添加了更多输入字段。该脚本工作正常，但将输入字段添加到所有表单。我需要它只为正在填写的当前表单添加字段。到目前为止，我没有运气。

以下是其中一种形式：

<form>
<div class="price-group">
  <div class="price-fields">
  <label>Multiple <a class="add-field" href="#"> Add Field</a></label>
    <br><input  maxlength="7" type="text" name="prices[]" />
  </div><!--end form-group price-fields-->
</div><!--end price-group-->
</form>

这是我的JavaScript：

$(document).ready(function($){
     $('.price-group .add-field').click(function(e){
          e.preventDefault();
          var n = $('.price-fields').length;
          $('.price-group').append('<div class=" price-fields"><input  maxlength="7" type="text" name="prices[]"  /><a class="remove-field pull-right" href="#">Remove</a></div><!--end form-group-->');
     });
     $('.price-group').on('click', '.remove-field', function(){
          $(this).parent().fadeOut("slow", function() {
              $(this).remove();
          });
          return false;
     });
});

我设置了jsfiddle： JsFiddle Link

Answer 1

您可以使用jQuery closest查找与所点击的.price-fields代码最接近的<a>：

＆＃13;

$(document).ready(function($){
     $('.price-group .add-field').click(function(e){
          e.preventDefault();
          var n = $('.price-fields').length;
          $(this).closest('.price-group').append('<div class=" price-fields"><input  maxlength="7" type="text" name="prices[]"  /><a class="remove-field pull-right" href="#">Remove</a></div><!--end form-group-->');
     });
     $('.price-group').on('click', '.remove-field', function(){
          $(this).parent().fadeOut("slow", function() {
              $(this).remove();
          });
          return false;
     });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="price-group">
  <div class="price-fields">
  <label>Multiple <a class="add-field" href="#"> Add Field</a></label>
    <br><input  maxlength="7" type="text" name="prices[]" />
  </div><!--end form-group price-fields-->
</div><!--end price-group-->
</form>

<form>
<div class="price-group">
  <div class="price-fields">
  <label>Multiple <a class="add-field" href="#"> Add Field</a></label>
    <br><input  maxlength="7" type="text" name="prices[]" />
  </div><!--end form-group price-fields-->
</div><!--end price-group-->
</form>

<form>
<div class="price-group">
  <div class="price-fields">
  <label>Multiple <a class="add-field" href="#"> Add Field</a></label>
    <br><input  maxlength="7" type="text" name="prices[]" />
  </div><!--end form-group price-fields-->
</div><!--end price-group-->
</form>

＆＃13;

Working fiddle

Answer 2

这项工作适用于较少的编辑代码

 $(document).ready(function($){
         $('.price-group').on('click', '.add-field', function(e){
              e.preventDefault();
              var n = $('.price-fields').length;
              $(this.parentNode.parentNode).append('<div class=" price-fields"><input  maxlength="7" type="text" name="prices[]"  /><a class="remove-field pull-right" href="#">Remove</a></div><!--end form-group-->');
         });
         $('.price-group').on('click', '.remove-field', function(){
              $(this).parent().fadeOut("slow", function() {
                  $(this).remove();
              });
              return false;
         });
    });

Answer 3

使用外部容器隔离实例。首先遍历容器...然后使用find()仅查看该实例

$('.price-group .add-field').click(function(e) {
  e.preventDefault();
  var $container = $(this).closest('.price-group');
  var n = $container.find('.price-fields').length;
  $container.append('<div class=" price-fields"><input  maxlength="7" type="text" name="prices[]"  /><a class="remove-field pull-right" href="#">Remove</a></div><!--end form-group-->');
});

Answer 4

将Id添加到所需的输入字段或其包含的div中。然后你可以这样做：$（'some_id'）。on（'click'，'。some-class'，function（）

在同一页面上为多个html表单重用JavaScript脚本

4 个答案: