javascript - 动态添加表单元素后应用javascript

Question

我正在动态构建表单元素，这些元素的 ID 需要在表单提交时递增才能保持唯一。除了添加应该在下拉选择中填写年份的 javascript 之外，一切正常。

它适用于第一个，因为它不是动态构建的。当 Javascript 动态构建表单元素并添加相同的 javascript 代码时，它不会动态构建年份。有没有更好的方法来完成这个？

这是Javascript:

var child = 1;

function minor_fields() {
  child++;

  var objTo = document.getElementById('minor_fields')
  var divminors = document.createElement("div");
  divminors.setAttribute("class", "form-group removeclass" + child);
  var rdiv = 'removeclass' + child;
  divminors.innerHTML = '<div class="minorSelect"><div class="form-group col-lg-5"><input id="txtMinorFirst' +
    child + '" type="text" name="minorFirst' + child +
    '" placeholder="First Name" class="form-control" data-minlength="2" data-validation="required" required></div><div class="form-group col-lg-2"><input id="txtMinorMiddle' +
    child + '" type="text" name="minorMiddle' + child +
    '" placeholder="MI" class="form-control" data-maxlength="1" required></div><div class="form-group col-lg-5"><input id="txtMinorLast' +
    child + '" type="text" name="minorLast' + child +
    '" placeholder="Last Name" class="form-control" data-minlength="2" data-validation="required" required></div><div class="form-group date-dropdowns col-lg-4"><select name="month" id="txtMinorMonth' +
    child + '" data-validation="required" required><option value=""> - Month - </option><option value="01">January</option><option value="02">Febuary</option><option value="03">March</option><option value="04">April</option><option value="05">May</option><option value="06">June</option><option value="07">July</option><option value="08">August</option><option value="09">September</option><option value="10">October</option><option value="11">November</option><option value="12">December</option></select></div><div class="form-group date-dropdowns col-lg-4"><select name="day" id="txtMinorDay' +
    child + '" data-validation="required" required><option value=""> - Day - </option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option></select></div><div class="form-group date-dropdowns col-lg-4"><select name="yearpicker"id="txtMinorYear' + child +
    '" data-validation="required" required><option value=""> - Year - </option></select><script>for (i = new Date().getFullYear(); i > 1900; i--){$("#txtMinorYear' + child + '").append($("<option />").val(i).html(i));}<\/script></div></div><div class="input-group-btn"><button class="btn btn-danger" type="button" onclick="remove_minor_fields(' + child + ');"> <span class="glyphicon glyphicon-minus" aria-hidden="true"></span> Remove Minor</button></div></div><div class="clear"></div>';

  objTo.appendChild(divminors)
}

function remove_minor_fields(rid) {
  $('.removeclass' + rid).remove();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="control-group" id="fields">
  <h4 class="control-label" for="field1">Minor Information:</h4>
  <div id="minor_fields"></div>
  <div class="controls" id="profs">
    <div id="minorInfo">
      <div class="form-group col-lg-5">
        <input id="txtMinorFirst1" type="text" name="first Name" placeholder="First Name" class="form-control" data-minlenth="2" data-validation="required" required>
      </div>
      <div class="form-group col-lg-2">
        <input id="txtMinorMiddle1" type="text" name="Middle Initial" placeholder="MI" class="form-control" data-maxlength="1">
      </div>
      <div class="form-group col-lg-5">
        <input id="txtMinorLast1" type="text" name="Last Name" placeholder="Last Name" class="form-control" data-minlength="2" data-validation="required" required>
      </div>
      <div class="" id="">
        <div class="form-group date-dropdowns col-lg-4">
          <select name="day" id="txtMinorMonth1" data-validation="required" required>
            <option value=""> - Month - </option>
            <option value="01">January</option>
            <option value="02">Febuary</option>
            <option value="03">March</option>
            <option value="04">April</option>
            <option value="05">May</option>
            <option value="06">June</option>
            <option value="07">July</option>
            <option value="08">August</option>
            <option value="09">September</option>
            <option value="10">October</option>
            <option value="11">November</option>
            <option value="12">December</option>
          </select>
        </div>
        <div class="form-group date-dropdowns col-lg-4">
          <select name="day" id="txtMinorDay1" data-validation="required" required>
            <option value=""> - Day - </option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
            <option value="13">13</option>
            <option value="14">14</option>
            <option value="15">15</option>
            <option value="16">16</option>
            <option value="17">17</option>
            <option value="18">18</option>
            <option value="19">19</option>
            <option value="20">20</option>
            <option value="21">21</option>
            <option value="22">22</option>
            <option value="23">23</option>
            <option value="24">24</option>
            <option value="25">25</option>
            <option value="26">26</option>
            <option value="27">27</option>
            <option value="28">28</option>
            <option value="29">29</option>
            <option value="30">30</option>
            <option value="31">31</option>
          </select>
        </div>
        <div class="form-group date-dropdowns col-lg-4">
          <select name="yearpicker" id="txtMinorYear1" data-validation="required" required>
           <option value=""> - Year - </option>
          </select>
          <script>
            for (i = new Date().getFullYear(); i > 1900; i--) {
              $("#txtMinorYear1").append($("<option />").val(i).html(i));
            }
          </script>
        </div>
      </div>
      <div class="input-group-btn">
        <button class="btn btn-success" type="button" onclick="minor_fields();"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add Minor </button>
      </div>
    </div>
  </div>
</div>

这是 bootsnipp 示例:https://bootsnipp.com/user/snippets/N6B0Q

Answer 1

您可以将年份填充功能移动到单独的函数中，并在页面加载时为每个子项调用它。

像这样:

var child = 1;

function minor_fields() {
  child++;

  var objTo = document.getElementById('minor_fields')
  var divminors = document.createElement("div");
  divminors.setAttribute("class", "form-group removeclass" + child);
  var rdiv = 'removeclass' + child;
  divminors.innerHTML = '<div class="minorSelect"><div class="form-group col-lg-5"><input id="txtMinorFirst' +
    child + '" type="text" name="minorFirst' + child +
    '" placeholder="First Name" class="form-control" data-minlength="2" data-validation="required" required></div><div class="form-group col-lg-2"><input id="txtMinorMiddle' +
    child + '" type="text" name="minorMiddle' + child +
    '" placeholder="MI" class="form-control" data-maxlength="1" required></div><div class="form-group col-lg-5"><input id="txtMinorLast' +
    child + '" type="text" name="minorLast' + child +
    '" placeholder="Last Name" class="form-control" data-minlength="2" data-validation="required" required></div><div class="form-group date-dropdowns col-lg-4"><select name="month" id="txtMinorMonth' +
    child + '" data-validation="required" required><option value=""> - Month - </option><option value="01">January</option><option value="02">Febuary</option><option value="03">March</option><option value="04">April</option><option value="05">May</option><option value="06">June</option><option value="07">July</option><option value="08">August</option><option value="09">September</option><option value="10">October</option><option value="11">November</option><option value="12">December</option></select></div><div class="form-group date-dropdowns col-lg-4"><select name="day" id="txtMinorDay' +
    child + '" data-validation="required" required><option value=""> - Day - </option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option></select></div><div class="form-group date-dropdowns col-lg-4"><select name="yearpicker"id="txtMinorYear' + child +
    '" data-validation="required" required><option value=""> - Year - </option></select><script>for (i = new Date().getFullYear(); i > 1900; i--){$("#txtMinorYear' + child + '").append($("<option />").val(i).html(i));}<\/script></div></div><div class="input-group-btn"><button class="btn btn-danger" type="button" onclick="remove_minor_fields(' + child + ');"> <span class="glyphicon glyphicon-minus" aria-hidden="true"></span> Remove Minor</button></div></div><div class="clear"></div>';
  objTo.appendChild(divminors)
  addYears();
}

function remove_minor_fields(rid) {
  $('.removeclass' + rid).remove();
}

function addYears() {
  for (i = new Date().getFullYear(); i > 1900; i--) {
    $("#txtMinorYear" + (child || 1)).append($("<option />").val(i).html(i));
  }
}

addYears();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="control-group" id="fields">
  <h4 class="control-label" for="field1">Minor Information:</h4>
  <div id="minor_fields"></div>
  <div class="controls" id="profs">
    <div id="minorInfo">
      <div class="form-group col-lg-5">
        <input id="txtMinorFirst1" type="text" name="first Name" placeholder="First Name" class="form-control" data-minlenth="2" data-validation="required" required>
      </div>
      <div class="form-group col-lg-2">
        <input id="txtMinorMiddle1" type="text" name="Middle Initial" placeholder="MI" class="form-control" data-maxlength="1">
      </div>
      <div class="form-group col-lg-5">
        <input id="txtMinorLast1" type="text" name="Last Name" placeholder="Last Name" class="form-control" data-minlength="2" data-validation="required" required>
      </div>
      <div class="" id="">
        <div class="form-group date-dropdowns col-lg-4">
          <select name="day" id="txtMinorMonth1" data-validation="required" required>
            <option value=""> - Month - </option>
            <option value="01">January</option>
            <option value="02">Febuary</option>
            <option value="03">March</option>
            <option value="04">April</option>
            <option value="05">May</option>
            <option value="06">June</option>
            <option value="07">July</option>
            <option value="08">August</option>
            <option value="09">September</option>
            <option value="10">October</option>
            <option value="11">November</option>
            <option value="12">December</option>
          </select>
        </div>
        <div class="form-group date-dropdowns col-lg-4">
          <select name="day" id="txtMinorDay1" data-validation="required" required>
            <option value=""> - Day - </option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
            <option value="13">13</option>
            <option value="14">14</option>
            <option value="15">15</option>
            <option value="16">16</option>
            <option value="17">17</option>
            <option value="18">18</option>
            <option value="19">19</option>
            <option value="20">20</option>
            <option value="21">21</option>
            <option value="22">22</option>
            <option value="23">23</option>
            <option value="24">24</option>
            <option value="25">25</option>
            <option value="26">26</option>
            <option value="27">27</option>
            <option value="28">28</option>
            <option value="29">29</option>
            <option value="30">30</option>
            <option value="31">31</option>
          </select>
        </div>
        <div class="form-group date-dropdowns col-lg-4">
          <select name="yearpicker" id="txtMinorYear1" data-validation="required" required>
           <option value=""> - Year - </option>
          </select>
        </div>
      </div>
      <div class="input-group-btn">
        <button class="btn btn-success" type="button" onclick="minor_fields();"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add Minor </button>
      </div>
    </div>
  </div>
</div>