對同一頁上的多個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（）