单击按钮时选择要重复的字段

Question

我正在循环通过一种“添加一年”的形式，并在下拉列表中加载JavaScript。每次我单击一个按钮时，它都会加倍选择字段。

当我单击此添加另一个按钮时，它将打开新的类似表格，如第一张图片

。当我每次单击“添加另一年”按钮时，我会添加选择下拉订单时，弹性。如果我在Addanother Buttton上单击10次，将添加10次选择。请参见图像以获取更好的理解。

let i = 1;

function GetYear() {
  console.log('hhh');
  var targetDiv = document.getElementById("formCON");
  targetDiv.innerHTML += `<div class="cantainer" id="formCON">        
        <div class="tom-select-custom mb-3 w-100 mt-4">
          <div class="d-flex justify-content-between align-items-center flex-wrap">
            <label>Year</label>
            <select class="js-select form-select locationlabel"  name="year_${i}" id="locationLabel">
              <option selected disabled>select</option>
              <option>2022</option>
              <option>2021</option>
              <option>2020</option>
              <option>2019</option>
              <option>2018</option>
              <option>2017</option>
              <option>2016</option>
              <option>2015</option>
              <option>2014</option>
            </select>
          </div>
        </div>
        <!-- Form -->
        
        <div class="d-flex justify-content-between maskNumber mb-4 align-items-center flex-wrap">
          <label>Total Community <br> investment($)</label>
            <input type="text" class="form-control locationlabel" name="totalinvestement_${i}" id="investement"placeholder="please enter">
          </div>
        <!-- End Form -->
        <!-- Form -->
        
        <div class="d-flex justify-content-between align-items-center mb-4 flex-wrap">
          <label for="Addresslabel">Pre-tax-profit ($)</label>
            <input type="text" class="form-control locationlabel"  name="Pre-tax-profit_${i}" id="Pre-tax-profit" placeholder="please enter">
          </div>
        
            <div class="d-flex justify-content-between align-items-center mb-4 flex-wrap">
              <label for="Addresslabel">Earnings before<br> interest,<br> tax, depreciation<br> &
                 amortization<br>(EBITDA) ($)</label>
                <input type="text" class="form-control locationlabel"  name="depreciation_${i}" id="depreciation" placeholder="please enter">
              </div>
        
              <div class="tom-select-custom mb-3 w-100 mt-4">
                <div class="d-flex justify-content-between align-items-center flex-wrap">
                  <label>Balance Date</label>
                  <select class="js-select form-select locationlabel" name="date_${i}"  id="locationLabel">
                    <option active disabled selected>Select</option>
                    <option>June 30</option>
                    <option>September 30</option>
                    <option>December 31</option>
                    <option>March 31</option>
                    <option>Other</option>
                  </select>
                </div>
              </div>
        
        <h4 class="card-header-title mb-6 mt-6">Itemisation</h4>
        
        <div class="d-flex justify-content-between align-items-center w-100 mb-4 flex-wrap">
          <label for="Addresslabel">Cash ($)</label>
            <input type="text" class=" form-control locationlabel"name="Cash_${i}" id="Cash" placeholder="please enter">
          </div>
        
          <div class="d-flex justify-content-between align-items-center w-100 mb-4 flex-wrap">
            <label for="Addresslabel">Volunteering ($)</label>
              <input type="text" class=" form-control locationlabel" name="volunteercash_${i}" id="Cash" placeholder="please enter"
         
              >
            </div>
        
            <div class="d-flex justify-content-between align-items-center w-100 mb-4 flex-wrap">
              <label for="Addresslabel">Products ($)</label>
                <input type="text" class="form-control locationlabel" name="productcash_${i}" id="Cash" placeholder="please enter">
              </div>
        
              <div class="d-flex justify-content-between align-items-center w-100 mb-4 flex-wrap">
                <label for="Addresslabel">Partnerships ($)</label>
                  <input type="text" class="form-control locationlabel" name="partnercash_${i}" id="Cash" placeholder="please enter">
                </div>
        
                <div class="d-flex justify-content-between align-items-center w-100 mb-4 flex-wrap">
                  <label for="Addresslabel">Management <br> Cost ($)</label>
                    <input type="text" class=" form-control locationlabel" name="managecash_${i}" id="Cash" placeholder="please enter">
                  </div>
        
                  <div class="d-flex justify-content-between align-items-center w-100 mb-4 flex-wrap">
                    <label for="Addresslabel">Foregone <br> Revenue($)</label>
                      <input type="text" class="form-control locationlabel" name="revenue_${i}" id="Cash" placeholder="please enter">
                    </div>
        
                    <div class="d-flex justify-content-between align-items-center w-100 mb-4 flex-wrap">
                      <label for="Addresslabel">Leverage ($)</label>
                        <input type="text" class="form-control locationlabel" name="leveragecash_${i}" id="Cash" placeholder="please enter">
                      </div>
        <!-- End Form -->
        <!-- Form -->
        
                          <!-- End Form -->
                          <a href="javascript:;" class="js-create-field form-link" onclick="GetYear()">
                            <i class="bi-plus-circle me-1">
                              
                            </i> Add another Year
                          </a>
                          
                    </div>`
  i += 1;
  document.getElementById('noOfYears').value = parseInt(document.getElementById('noOfYears').value) + 1
  initSelect()
  myjs()
}

function initSelect() {
  var a = $('.js-select')
  for (var v = 0; v < a.length; v++) {
    try {
      if (!$(a[v]).hasClass('dropdown')) {
        new TomSelect(a[v], {
          render: {
            'option': function(data, escape) {
              return data.optionTemplate || `<div>${data.text}</div>>`
            },
            'item': function(data, escape) {
              return data.optionTemplate || `<div>${data.text}</div>>`
            }
          }
        })
      };
    } catch (err) {
      console.log(err)
    }
  }
}

GetYear();
initSelect()

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<input id="noOfYears" type="number" value="1" />
<div id="formCON"></div>

Answer 1

在调用单击之前，您可以使用Unbrine方法。 Unbrind方法将元素上的唯一事件设置

$('.js-create-field').unbind().click(function(){GetYear()})