使用jquery为动态表单元素动态添加功能

Question

我使用 jquery 创建了一个包含动态表单元素的网页。现在我想对动态添加的元素应用相同的功能。怎么办？

检查这个：https://jsfiddle.net/tz5w6fu4/1/

在这里您可以看到，在更改第一个文本输入字段的文本时，将添加一个新选项，该选项将添加到它旁边的选择元素中，然后单击/更改选择元素的选项时，文本输入将在旁边的文本输入字段中进行更改。第一个元素通常会发生这种情况..

现在如何向动态添加的表单元素添加相同的功能？

Answer 1

您不能将 same id 用于多个元素，而是将它们更改为 classes 。然后，使用.find() 和closest() 获取所需元素的引用并在那里更改值。

演示代码：

$(document).on('change', '.abc', function() {
  var get_Select_reference = $(this).closest(".inputFormRow") //get closet div..
  get_Select_reference.find(".xyz").empty() //empty your select-box
  get_Select_reference.find(".def").val("") //empty input
  if ($(this).val() != "") {
    get_Select_reference.find(".xyz").append(new Option("Demo", "demo"));
    get_Select_reference.find(".xyz").append(new Option("Demo1", "demo1")); //append options..
  }
});
$(document).on('change', '.xyz', function() {
  var get_input_reference = $(this).closest(".inputFormRow").find(".def") //get input..
  var val = $(this).val(); //your select-box value
  get_input_reference.val(val);
});


// add row
$("#addRow").click(function() {
  var html = '';
  //added classes..
  html += '<div class="inputFormRow">';
  html += '<div class="input-group mb-3">';
  html += '<input type="text" name="title[]" class="form-control m-input abc"  placeholder="Enter title" autocomplete="off">';
  html += '<select name="ch[]" class="xyz">';
  html += '</select>';
  html += '<input type="text" name="name[]" class="form-control m-inpu t def">';
  html += '<div class="input-group-append">';
  html += '<button type="button" class="btn btn-danger removeRow">Remove</button>';
  html += '</div>';
  html += '</div>';

  $('#newRow').append(html);
});

//use class here as well
$(document).on('click', '.removeRow', function() {
  $(this).closest('.inputFormRow').remove();
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="container" style="max-width: 700px;">

  <form method="post" action="">
    <div class="row">
      <div class="col-lg-12">
        <!--added class-->
        <div class="inputFormRow">
          <div class="input-group mb-3">
            <input type="text" name="title[]" class="form-control m-input abc" id="abc" placeholder="Enter title" autocomplete="off">
            <select name="ch[]" class="xyz" id="xyz">
            </select>
            <input type="text" name="name[]" class="form-control m-input def" id="def">
            <div class="input-group-append">
              <button id="removeRow" type="button" class="btn btn-danger removeRow">Remove</button>
            </div>
          </div>
        </div>

        <div id="newRow"></div>
        <button id="addRow" type="button" class="btn btn-info">Add Row</button>
      </div>
    </div>
  </form>
</div>