对同一页上的多个html表单重用JavaScript脚本

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>标签：

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

<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>

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所需的输入域或它包含在 股利然后，你可以这样做：$（'SOME_ID '）.on（'click'，'.some-class'，function（）